import { ReactNode } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { LucideIcon } from "lucide-react";

interface DetailField {
  label: string;
  value: ReactNode;
  fullWidth?: boolean;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
  };
}

interface DetailSectionProps {
  title: string;
  icon?: LucideIcon;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
  };
  fields: DetailField[];
  actions?: ReactNode;
  columns?: 1 | 2 | 3 | 4;
}

export function DetailSection({
  title,
  icon: Icon,
  badge,
  fields,
  actions,
  columns = 2
}: DetailSectionProps) {
  const gridCols = {
    1: "grid-cols-1",
    2: "grid-cols-1 md:grid-cols-2",
    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {Icon && <Icon className="h-5 w-5 text-gray-600" />}
            <CardTitle>{title}</CardTitle>
            {badge && (
              <Badge variant={badge.variant || "default"}>
                {badge.label}
              </Badge>
            )}
          </div>
          {actions && <div className="flex items-center gap-2">{actions}</div>}
        </div>
      </CardHeader>
      <CardContent>
        <div className={`grid ${gridCols[columns]} gap-4`}>
          {fields.map((field, index) => (
            <div
              key={index}
              className={field.fullWidth ? "md:col-span-full" : ""}
            >
              <dt className="text-sm text-gray-600 mb-1">{field.label}</dt>
              <dd className="text-sm font-medium text-gray-900 flex items-center gap-2">
                {field.value}
                {field.badge && (
                  <Badge variant={field.badge.variant || "outline"}>
                    {field.badge.label}
                  </Badge>
                )}
              </dd>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
