'use client';

import { useState } from 'react';
import { useShifts } from '@/hooks/useShifts';
import { useTenant } from '@/contexts/tenant-context';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { ShiftCard } from '@/components/shifts/shift-card';

export default function ShiftsPage() {
  const [dateRange] = useState<{ startDate?: string; endDate?: string }>({});
  const { data, isLoading } = useShifts(dateRange);
  const { userRole } = useTenant();

  if (isLoading) return <div>Loading shifts...</div>;

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Shifts</h1>
        {(userRole === 'Manager' || userRole === 'Admin') && (
          <Link href="/shifts/new">
            <Button>New Shift</Button>
          </Link>
        )}
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {data?.items.map((shift) => (
          <ShiftCard key={shift.id} shift={shift} />
        ))}
      </div>
    </div>
  );
}
