'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { StyledCard } from '@/components/ui/StyledCard';
import { StatCard } from '@/components/ui/StatCard';
import { ActionCard } from '@/components/ui/ActionCard';
import { TaskCard } from '@/components/ui/TaskCard';
import { MetricCard } from '@/components/ui/MetricCard';
import { SkeletonCard } from '@/components/ui/SkeletonCard';

export function CardsSection() {
  return (
    <section id="cards" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Cards
      </h2>

      <div className="space-y-8">
        {/* Basic Cards */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Basic Cards
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Basic Card</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-[var(--muted-foreground)]">
                  This is a basic card component with header and content.
                </p>
              </CardContent>
            </Card>

            <StyledCard>
              <div className="p-6">
                <h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">
                  Styled Card
                </h3>
                <p className="text-[var(--muted-foreground)]">
                  A styled card with custom styling and hover effects.
                </p>
              </div>
            </StyledCard>
          </div>
        </div>

        {/* Stat Cards */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Stat Cards
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <StatCard title="Total Tasks" value="42" icon="📋" />
            <StatCard title="Completed" value="28" icon="✅" />
            <StatCard title="In Progress" value="14" icon="🔄" />
            <StatCard title="Overdue" value="3" icon="⚠️" />
          </div>
        </div>

        {/* Action Cards */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Action Cards
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <ActionCard
              title="Quick Actions"
              description="Common actions for task management"
              icon="⚡"
            />
            <ActionCard
              title="Settings"
              description="Configure your workspace"
              icon="⚙️"
            />
          </div>
        </div>

        {/* Task Cards */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Task Cards
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <TaskCard
              id="1"
              title="Implement user authentication"
              description="Add login and registration functionality"
              priority="high"
              status="in_progress"
              dueDate={new Date(Date.now() + 3 * 86400000)}
              tags={['auth', 'security']}
            />
            <TaskCard
              id="2"
              title="Design new dashboard"
              description="Create a modern dashboard interface"
              priority="medium"
              status="todo"
              dueDate={new Date(Date.now() + 7 * 86400000)}
              tags={['design', 'ui']}
            />
          </div>
        </div>

        {/* Metric Cards */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Metric Cards
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <MetricCard
              title="Performance Score"
              value="98"
              subtitle="Excellent"
              icon="⚡"
              color="success"
            />
            <MetricCard
              title="Code Coverage"
              value="92%"
              subtitle="Good coverage"
              icon="📊"
              color="primary"
            />
            <MetricCard
              title="Bugs Found"
              value="3"
              subtitle="Need attention"
              icon="🐛"
              color="warning"
            />
            <MetricCard
              title="Uptime"
              value="99.9%"
              subtitle="Last 30 days"
              icon="🟢"
              color="default"
            />
          </div>
        </div>

        {/* Skeleton Cards */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Skeleton Cards
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <SkeletonCard />
            <SkeletonCard />
            <SkeletonCard />
          </div>
        </div>
      </div>
    </section>
  );
}
