"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
} from "@/app/shadcn_components/ui/card";
import { motion } from "framer-motion";
import {
  AlertTriangle,
  FileQuestion,
  ClipboardList,
  ClipboardX,
  PoundSterling,
  Home,
} from "lucide-react";

type PlaceholderCard = {
  key: string;
  title: string;
  subtitle: string;
  icon: any;
  color: string;
};

export const CONDITION_PLACEHOLDERS = [
  {
    key: "awwabs",
    title: "Awaabs Law Warnings",
    subtitle: "Severe hazards related to damp & mould.",
    icon: AlertTriangle,
    color: "text-red-600",
  },
  {
    key: "cat12",
    title: "Category 1 & 2 Hazards",
    subtitle: "Safety risks identified under HHSRS.",
    icon: AlertTriangle,
    color: "text-orange-500",
  },
  {
    key: "noStockSurvey",
    title: "Missing Stock Condition Survey",
    subtitle: "Properties without a structural/condition survey.",
    icon: ClipboardX,
    color: "text-brandblue",
  },
  {
    key: "noDecentHomes",
    title: "Missing Decent Homes Survey",
    subtitle: "Properties lacking a Decent Homes standard review.",
    icon: ClipboardList,
    color: "text-brandblue",
  },
];

export const FINANCIAL_PLACEHOLDERS = [
  {
    key: "rent",
    title: "Rent",
    subtitle: "Historic or current rent information.",
    icon: PoundSterling,
    color: "text-brandbrown",
  },
  {
    key: "valuation",
    title: "Valuation",
    subtitle: "Property valuation data.",
    icon: Home,
    color: "text-midblue",
  },
];

export function PlaceholderMetricCards({
  items,
}: {
  items: PlaceholderCard[];
}) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {items.map((c) => {
        const Icon = c.icon;

        return (
          <Card
            key={c.key}
            className="relative h-full flex flex-col border border-gray-100 bg-gradient-to-br from-white to-gray-50 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300"
          >
            <CardHeader className="flex flex-row items-center gap-2 pb-1">
              <div className="p-1.5 rounded-md bg-gray-100">
                <motion.div
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.95 }}
                  className="p-1.5 rounded-md bg-gray-50"
                >
                  <Icon className={`h-4 w-4 ${c.color}`} />
                </motion.div>
              </div>

              <CardTitle className="text-md font-medium text-gray-600 mb-2">
                {c.title}
              </CardTitle>
            </CardHeader>

            <CardContent className="flex flex-1 flex-col pb-2 mb-2">
              <div className="text-lg font-semibold text-gray-400 italic">
                Data not provided
              </div>
            </CardContent>

            <CardFooter className="pt-0 pb-4">
              <p className="text-xs text-gray-500">{c.subtitle}</p>
            </CardFooter>
          </Card>
        );
      })}
    </div>
  );
}
