import {
  BookOpen,
  Clock,
  DraftingCompass,
  Loader2,
  Target,
  Trophy,
  Zap,
} from "lucide-react";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Button } from "../../components/ui/button";

export const Drills = () => {
  return (
    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
      <header className="flex justify-between items-center">
        <div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
          <BookOpen size={20} color="white" />
        </div>
        <div className="bg-purple-100 rounded-full w-fit py-2 px-4 flex items-center gap-2">
          <div className="h-2 w-2 bg-linear-to-br from-purple-400 to-purple-500 rounded-full"></div>
          <span className="font-satoshi-bold text-md">0</span>
        </div>
      </header>
      <section>
        <Card
          className="relative bg-linear-to-br from-purple-500 to-purple-600 rounded-4xl
        flex-row"
        >
          <div className="space-y-4">
            <CardHeader className="w-[65%]">
              <CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
                See where you stand
              </CardTitle>
            </CardHeader>

            <CardContent className="w-2/3">
              <p className="font-satoshi text-white">
                Test your knowledge with an adaptive practice test.
              </p>
            </CardContent>
            <CardFooter>
              <Button className="bg-gray-50 drop-shadow-xl p-6 text-md font-satoshi text-black rounded-full">
                Take a practice test
              </Button>
            </CardFooter>
          </div>
          <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -right-20">
            <DraftingCompass size={300} color="white" />
          </div>
        </Card>
      </section>
      <section className="flex flex-col gap-6">
        <h1 className="font-satoshi-black text-2xl">Practice your way</h1>
        <Card className="rounded-4xl">
          <CardHeader className="space-y-3">
            <div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
              <Target size={20} color="white" />
            </div>
            <div className="space-y-2">
              <CardTitle className="font-satoshi">Targeted Practice</CardTitle>
              <CardDescription className="font-satoshi">
                Focus on what matters
              </CardDescription>
            </div>
            <CardAction>
              <div className="w-fit bg-red-100 p-2 rounded-full">
                <Loader2 size={30} color="#fa6969" />
              </div>
            </CardAction>
          </CardHeader>
        </Card>
        <Card className="rounded-4xl">
          <CardHeader className="space-y-3">
            <div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
              <Zap size={20} color="white" />
            </div>
            <div className="space-y-2">
              <CardTitle className="font-satoshi">Drills</CardTitle>
              <CardDescription className="font-satoshi">
                Train speed and accuracy
              </CardDescription>
            </div>
            <CardAction>
              <div className="w-fit bg-cyan-100 p-3 rounded-full">
                <Clock size={26} color="oklch(71.5% 0.143 215.221)" />
              </div>
            </CardAction>
          </CardHeader>
        </Card>
        <Card className="rounded-4xl">
          <CardHeader className="space-y-3">
            <div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
              <Trophy size={20} color="white" />
            </div>
            <div className="space-y-2">
              <CardTitle className="font-satoshi">Hard Test Modules</CardTitle>
              <CardDescription className="font-satoshi">
                Focus on what matters
              </CardDescription>
            </div>
            <CardAction>
              <div className="w-fit bg-lime-100 p-3 rounded-full">
                <BookOpen size={26} color="oklch(76.8% 0.233 130.85)" />
              </div>
            </CardAction>
          </CardHeader>
        </Card>
      </section>
    </main>
  );
};