import { Calendar, Sun, Moon, Hourglass, Check, type LucideIcon } from "lucide-react";

type Card = {
  Icon: LucideIcon;
  iconWrap: string;
  iconColor: string;
  eyebrow: string;
  primary: string;
  primaryClass: string;
  secondary: React.ReactNode;
};

const CARDS: Card[] = [
  {
    Icon: Calendar,
    iconWrap: "bg-brand-gold/10",
    iconColor: "text-brand-gold",
    eyebrow: "Hôm nay",
    primary: "30/05/2026",
    primaryClass: "font-numeral text-lg",
    secondary: <span className="truncate">Mùng 4 tháng 5 AL</span>,
  },
  {
    Icon: Sun,
    iconWrap: "bg-brand-red/10",
    iconColor: "text-brand-red-light",
    eyebrow: "Lục Diệu giờ này",
    primary: "Tốc Hỷ",
    primaryClass: "font-display text-lg",
    secondary: (
      <span className="flex items-center gap-1 text-emerald-400">
        <Check className="h-3 w-3" aria-hidden="true" /> Hung tin biến cát
      </span>
    ),
  },
  {
    Icon: Moon,
    iconWrap: "bg-brand-gold/10",
    iconColor: "text-brand-gold",
    eyebrow: "Sao tốt hôm nay",
    primary: "Thiên Đức",
    primaryClass: "font-display text-lg",
    secondary: <span>Cát thần chủ về phúc lộc</span>,
  },
  {
    Icon: Hourglass,
    iconWrap: "bg-bg-inset",
    iconColor: "text-ink-secondary",
    eyebrow: "Giờ hoàng đạo",
    primary: "Dần · Mão · Tỵ",
    primaryClass: "font-display text-lg",
    secondary: (
      <>
        3·5·9 giờ <span className="text-emerald-400">Tốt nhất</span>
      </>
    ),
  },
];

export function TodayStrip() {
  return (
    <section className="border-stroke-subtle bg-bg-elevated/40 border-y">
      <div className="max-w-container mx-auto px-4 py-6 lg:px-6 lg:py-8">
        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
          {CARDS.map(({ Icon, iconWrap, iconColor, eyebrow, primary, primaryClass, secondary }) => (
            <div key={eyebrow} className="flex items-center gap-3">
              <div
                className={`flex h-10 w-10 items-center justify-center rounded-md ${iconWrap} ${iconColor}`}
              >
                <Icon className="h-5 w-5" aria-hidden="true" />
              </div>
              <div className="min-w-0">
                <div className="text-ink-muted text-xs tracking-wider uppercase">{eyebrow}</div>
                <div className={`text-ink-primary leading-tight ${primaryClass}`}>{primary}</div>
                <div className="text-ink-secondary text-xs">{secondary}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}