import { Settings } from 'lucide-react'

import { DashboardFooter } from '@renderer/components/dashboard/DashboardFooter'
import { MetricsGrid } from '@renderer/components/dashboard/MetricsGrid'
import { Badge } from '@renderer/components/ui/badge'
import { Button } from '@renderer/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@renderer/components/ui/card'
import { statusVariant, tools } from '@renderer/student/mockData'

export function ToolsPage(): React.JSX.Element {
  return (
    <>
      <MetricsGrid />

      <section className="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-4">
        {tools.map((tool) => {
          const Icon = tool.icon

          return (
            <Card key={tool.title} className="shadow-none">
              <CardHeader className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="grid size-10 place-items-center rounded-md bg-muted text-primary">
                    <Icon className="size-5" />
                  </div>
                  <Badge variant={statusVariant[tool.status]}>{tool.status}</Badge>
                </div>
                <div>
                  <CardTitle className="text-base">{tool.title}</CardTitle>
                  <CardDescription className="mt-2 min-h-10 leading-6">
                    {tool.description}
                  </CardDescription>
                </div>
              </CardHeader>
              <CardContent className="flex gap-2">
                <Button size="sm">打开</Button>
                <Button size="sm" variant="outline">
                  <Settings className="size-4" />
                  配置
                </Button>
              </CardContent>
            </Card>
          )
        })}
      </section>

      <DashboardFooter />
    </>
  )
}
