import React from 'react';

export interface DashboardReportCtasProps {
  cycleClosed: boolean;
  hasDailySnapshot: boolean;
  hasEndCycleSnapshot: boolean;
  onOpenDaily: () => void;
  onOpenEndCycle: () => void;
}

const buttonClass =
  'rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-800 disabled:cursor-not-allowed disabled:bg-slate-400 disabled:hover:bg-slate-400';

const label = (hasSnapshot: boolean) => (hasSnapshot ? 'Lihat' : 'Buat');

const DashboardReportCtas: React.FC<DashboardReportCtasProps> = ({
  cycleClosed,
  hasDailySnapshot,
  hasEndCycleSnapshot,
  onOpenDaily,
  onOpenEndCycle,
}) => (
  <div className="flex flex-col items-end gap-1">
    <div className="flex flex-wrap items-center justify-end gap-3">
      <button type="button" onClick={onOpenDaily} className={buttonClass}>
        {label(hasDailySnapshot)} Harian
      </button>
      <button
        type="button"
        onClick={onOpenEndCycle}
        disabled={!cycleClosed}
        className={buttonClass}
      >
        {label(hasEndCycleSnapshot)} Akhir Siklus
      </button>
    </div>
    {!cycleClosed && <p className="text-xs text-slate-500">Tersedia setelah siklus ditutup</p>}
  </div>
);

export default DashboardReportCtas;