work-club-manager/frontend/src/components/shifts/shift-card.tsx

import Link from 'next/link';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';
import { ShiftListItemDto, useSignUpShift, useCancelSignUp } from '@/hooks/useShifts';

interface ShiftCardProps {
  shift: ShiftListItemDto;
}

export function ShiftCard({ shift }: ShiftCardProps) {
  const signUpMutation = useSignUpShift();
  const cancelMutation = useCancelSignUp();

  const capacityPercentage = (shift.currentSignups / shift.capacity) * 100;
  const isFull = shift.currentSignups >= shift.capacity;
  const isPast = new Date(shift.startTime) < new Date();

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <CardTitle>{shift.title}</CardTitle>
          {isPast && <Badge variant="secondary">Past</Badge>}
        </div>
        <CardDescription>
          {new Date(shift.startTime).toLocaleString()} - {new Date(shift.endTime).toLocaleTimeString()}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          <div>
            <div className="flex justify-between text-sm mb-1">
              <span>Capacity</span>
              <span>{shift.currentSignups}/{shift.capacity} spots filled</span>
            </div>
            <Progress value={capacityPercentage} />
          </div>

          <div className="flex gap-2">
            <Link href={`/shifts/${shift.id}`}>
              <Button variant="outline" size="sm">View Details</Button>
            </Link>
            {!isPast && !isFull && !shift.isSignedUp && (
              <Button size="sm" onClick={() => signUpMutation.mutate(shift.id)} disabled={signUpMutation.isPending}>
                {signUpMutation.isPending ? 'Signing up...' : 'Sign Up'}
              </Button>
            )}
            {!isPast && shift.isSignedUp && (
              <Button variant="outline" size="sm" onClick={() => cancelMutation.mutate(shift.id)} disabled={cancelMutation.isPending}>
                {cancelMutation.isPending ? 'Canceling...' : 'Cancel Sign-up'}
              </Button>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}