import { Badge } from '@/components/ui/badge';
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useUserInfo } from '@/hooks/data/useUserInfo';
import { QrDialog } from '../checkin/qr-dialog';
import { withFallback } from '../hoc/with-fallback';
import { CardSkeleton } from './card-skeleton';

function CheckinCard_() {
  const { data } = useUserInfo();
  return (
    <Card className="@container/card">
      <CardHeader>
        <CardDescription>签到状态</CardDescription>
        <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
          {data.checkin !== null ? '已签到' : '未签到'}
          {data.checkin !== null && <span className="text-sm font-medium ml-2">{`${new Date(data.checkin).toLocaleString()}`}</span>}
        </CardTitle>
        <CardAction>
          <Badge variant="outline">Day 1</Badge>
        </CardAction>
      </CardHeader>
      <CardFooter className="flex-col items-start gap-1.5 text-sm">
        <QrDialog
          eventId="019b5bf2-90ce-75f5-93a4-a66914c2ef11"
        >
        </QrDialog>
      </CardFooter>
    </Card>
  );
}

export const CheckinCard = withFallback(CheckinCard_, <CardSkeleton />);