import React from 'react';

type BannerProps = {
  kind?: 'error' | 'info' | 'success';
  children: React.ReactNode;
};

const styles = {
  error: 'bg-red-50 text-red-800 border-red-200',
  info: 'bg-sky-50 text-sky-800 border-sky-200',
  success: 'bg-green-50 text-green-800 border-green-200',
};

export const Banner: React.FC<BannerProps> = ({ kind = 'info', children }) => (
  <div className={`rounded-lg border px-4 py-3 text-sm ${styles[kind]}`}>{children}</div>
);

export const PageHeader: React.FC<{
  title: string;
  subtitle?: string;
  icon?: React.ReactNode;
  actions?: React.ReactNode;
}> = ({ title, subtitle, icon, actions }) => (
  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div className="flex items-center">
      {icon && (
        <div className="bg-red-600 text-white p-3 rounded-lg mr-4">
          <span className="text-2xl sm:text-3xl">{icon}</span>
        </div>
      )}
      <div>
        <h1 className="text-2xl font-bold text-gray-800">{title}</h1>
        {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
      </div>
    </div>
    {actions}
  </div>
);

export const Spinner: React.FC = () => (
  <div className="flex items-center justify-center py-12 text-gray-400 gap-2">
    <i className="fa-solid fa-spinner fa-spin" />
    <span>Memuat...</span>
  </div>
);

export const EmptyFarm: React.FC<{ onSettings: () => void }> = ({ onSettings }) => (
  <Banner>
    Pilih site, kandang, dan siklus di header. GM mendaftarkan site di{' '}
    <button type="button" className="font-semibold underline" onClick={onSettings}>
      Pengaturan
    </button>
    ; BUH melihat rollup site dari GM yang dikelola.
  </Banner>
);