import type { ReactNode } from 'react';

import type { NasaIconName } from '../../components/icons/NasaIcon';

import NasaIcon from '../../components/icons/NasaIcon';



export default function DashboardSection({

  title,

  subtitle,

  action,

  children,

  className = '',

  icon,

}: {

  title: string;

  subtitle?: string;

  action?: ReactNode;

  children: ReactNode;

  className?: string;

  icon?: NasaIconName;

}) {

  return (

    <section className={`dash-card ${className}`}>

      <div className="flex flex-wrap items-start justify-between gap-3 mb-4">

        <div>

          <h2 className="dash-section-title flex items-center gap-2">

            {icon && <NasaIcon name={icon} size={14} className="nasa-icon--telemetry" />}

            {title}

          </h2>

          {subtitle && <p className="dash-section-subtitle">{subtitle}</p>}

        </div>

        {action}

      </div>

      {children}

    </section>

  );

}

