"use client";

import React from "react";
import Link from "next/link";
import type { LucideIcon } from "lucide-react";
import { TONES, type Tone } from "./tones";

/** A single "quick action" tile — icon chip, title, description, whole tile links out. */
export function QuickActionTile({
  icon: Icon,
  title,
  description,
  href,
  tone = "brand",
}: {
  icon: LucideIcon;
  title: string;
  description: string;
  href: string;
  tone?: Tone;
}) {
  const t = TONES[tone] || TONES.brand;
  return (
    <Link
      href={href}
      className="flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:border-brand-200 hover:shadow transition-shadow"
    >
      <div className={"w-9 h-9 rounded-lg flex items-center justify-center shrink-0 " + t.bg}>
        <Icon className={"w-5 h-5 " + t.icon} />
      </div>
      <div className="min-w-0">
        <div className="text-sm font-semibold text-gray-900">{title}</div>
        <div className="text-xs text-gray-500 mt-0.5">{description}</div>
      </div>
    </Link>
  );
}

export function QuickActionGrid({ children }: { children: React.ReactNode }) {
  return <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">{children}</div>;
}