import { DecimalsArrowRight, MapPin } from "lucide-react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
} from "../../components/ui/card";
import { Field, FieldLabel } from "../../components/ui/field";
import { Progress } from "../../components/ui/progress";

export const Analytics = () => {
  return (
    <main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
      <h1 className="font-satoshi-bold text-3xl text-center tracking-tight">
        Analytics
      </h1>
      <section className="flex w-full gap-3 justify-between">
        <Card className="w-1/3 relative bg-linear-to-br from-purple-600 to-purple-700 rounded-4xl">
          <div className="space-y-4">
            <CardContent className="md:w-full space-y-4 flex flex-col items-center justify-center h-50">
              <MapPin size={60} color="white" />
              <h1 className="text-4xl font-satoshi-bold text-white flex">
                <span>145</span> <span className="text-xl">th</span>
              </h1>
            </CardContent>
          </div>
          <div className="overflow-hidden opacity-0 -rotate-45 absolute -top-2 -right-30 ">
            <DecimalsArrowRight size={380} color="white" />
          </div>
        </Card>
        <Card
          className="w-2/3 relative bg-linear-to-br from-gray-100 to-gray-300 rounded-4xl
        flex-row"
        >
          <div className="space-y-4">
            <CardHeader className="md:w-full">
              <CardTitle className="font-satoshi-bold tracking-tight text-3xl ">
                Details
              </CardTitle>
            </CardHeader>

            <CardContent className="md:w-full space-y-4"></CardContent>
            <CardFooter className="flex justify-between"></CardFooter>
          </div>
          <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-2 -right-30 ">
            <DecimalsArrowRight size={380} color="white" />
          </div>
        </Card>
      </section>
      <section>
        <Card>
          <CardContent>
            <Field className="w-full max-w-sm">
              <FieldLabel htmlFor="progress-upload">
                <span className="font-satoshi text-xl">Score</span>
                <span className="ml-auto font-satoshi">
                  <span className="text-5xl">854</span>
                  <span className="text-lg">/1600</span>
                </span>
              </FieldLabel>
              <Progress value={55} id="progress-upload" max={100} />
            </Field>
          </CardContent>
        </Card>
      </section>
    </main>
  );
};