import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { StatCards } from "../organisms/StatCards";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";

interface DashboardSection {
  title: string;
  content: ReactNode;
  span?: "full" | "half";
}

interface DashboardTemplateProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  stats: Array<{
    label: string;
    value: string | number;
    icon: LucideIcon;
    iconColor?: string;
    trend?: { value: string; isPositive: boolean };
  }>;
  sections: DashboardSection[];
  quickActions?: Array<{
    label: string;
    description: string;
    icon: LucideIcon;
    onClick: () => void;
  }>;
}

export const DashboardTemplate = ({
  title,
  description,
  icon,
  stats,
  sections,
  quickActions
}: DashboardTemplateProps) => {
  return (
    <PageLayout>
      <PageHeader
        title={title}
        description={description}
        icon={icon}
      />
      
      <StatCards stats={stats} />
      
      {quickActions && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {quickActions.map((action, index) => {
            const Icon = action.icon;
            return (
              <Card
                key={index}
                className="cursor-pointer hover:bg-accent transition-colors"
                onClick={action.onClick}
              >
                <CardContent className="p-6">
                  <div className="flex items-center gap-4">
                    <div className="p-2 bg-primary/10 rounded-lg">
                      <Icon className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <p className="font-medium">{action.label}</p>
                      <p className="text-sm text-muted-foreground">{action.description}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {sections.map((section, index) => (
          <Card
            key={index}
            className={section.span === "full" ? "lg:col-span-2" : ""}
          >
            <CardHeader>
              <CardTitle>{section.title}</CardTitle>
            </CardHeader>
            <CardContent>
              {section.content}
            </CardContent>
          </Card>
        ))}
      </div>
    </PageLayout>
  );
};
