import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

function ReminderCardSkeleton() {
  return (
    <Card className="py-3 rounded-md">
      <CardContent className="px-4 flex flex-col md:flex-row md:justify-between gap-4 md:gap-0">
        <div className="flex flex-col gap-1.5 flex-1">
          <Skeleton className="h-5 w-64" />
          <Skeleton className="h-4 w-80" />
          <div className="flex flex-col sm:flex-row gap-2.5">
            <div className="flex gap-1">
              <Skeleton className="h-5 w-12 rounded-sm" />
              <Skeleton className="h-5 w-16 rounded-sm" />
            </div>

            <div className="flex flex-col sm:flex-row gap-2">
              <Skeleton className="h-7 w-20 rounded-sm" />
              <Skeleton className="h-7 w-24 rounded-sm" />
              <Skeleton className="h-7 w-16 rounded-sm" />
            </div>
          </div>
        </div>
        <div className="md:shrink-0 flex items-start">
          <Skeleton className="h-5 w-8 rounded-full" />
        </div>
      </CardContent>
    </Card>
  )
}

export function LoadingReminders() {
  return (
    <div className="space-y-4">
      <ReminderCardSkeleton />
      <ReminderCardSkeleton />
      <ReminderCardSkeleton />
    </div>
  )
}