import type { ReactNode } from 'react';
import { StatusPill } from './ui';

export function ModuleHeader({ eyebrow, title, description, action }: { eyebrow: string; title: string; description: string; action?: ReactNode }) {
  return <div className="module-header"><div><span className="eyebrow">{eyebrow}</span><h2>{title}</h2><p>{description}</p></div>{action}</div>;
}

export function ModuleTile({ icon, title, description, meta, tone = 'green' }: { icon: string; title: string; description: string; meta?: string; tone?: 'green'|'blue'|'amber'|'rose' }) {
  return <article className={`module-tile tile-${tone} premium-lift`}><span className="module-tile-icon">{icon}</span><div><h3>{title}</h3><p>{description}</p>{meta && <small>{meta}</small>}</div></article>;
}

export function EmptyDataTable({ columns, message, detail }: { columns: string[]; message: string; detail: string }) {
  return <div className="table-wrap"><table><thead><tr>{columns.map((column) => <th key={column}>{column}</th>)}</tr></thead><tbody><tr><td colSpan={columns.length} className="empty-cell"><div className="table-empty-icon">▤</div>{message}<small>{detail}</small></td></tr></tbody></table></div>;
}

export function Insight({ severity, title, children }: { severity: 'info'|'notice'|'warning'; title: string; children: ReactNode }) {
  const tone = severity === 'warning' ? 'red' : severity === 'notice' ? 'amber' : 'blue';
  return <article className={`insight-card insight-${severity}`}><div className="insight-head"><StatusPill tone={tone}>{severity === 'warning' ? 'تحذير تشغيلي' : severity === 'notice' ? 'ملاحظة' : 'معلومة'}</StatusPill><span>AI Ops</span></div><h3>{title}</h3><p>{children}</p></article>;
}

export function SettingRow({ title, description, status }: { title: string; description: string; status: ReactNode }) {
  return <div className="setting-row"><div><strong>{title}</strong><small>{description}</small></div>{status}</div>;
}