import * as React from 'react';

export interface PanelProps {
  title: string;
  eyebrow?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}

export function Panel({ title, eyebrow, action, children, className = '' }: PanelProps) {
  return (
    <section className={`rounded-[1.6rem] border border-slate-200 bg-white p-5 shadow-[0_10px_30px_rgba(15,23,42,0.05)] ${className}`.trim()}>
      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
        <div>
          {eyebrow ? <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-slate-500">{eyebrow}</p> : null}
          <h2 className="mt-1 text-lg font-black tracking-tight text-slate-900">{title}</h2>
        </div>
        {action ? <div>{action}</div> : null}
      </div>
      <div className="mt-4">{children}</div>
    </section>
  );
}