"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ShotCard } from "@/components/shots/ShotCard";
import { NewShotDialog } from "@/components/shots/NewShotDialog";
import { Film, Plus } from "lucide-react";
import type { ShotWithDetails } from "@/types";

interface ProjectShotsClientProps {
  projectId: string;
  shots: ShotWithDetails[];
}

export function ProjectShotsClient({ projectId, shots }: ProjectShotsClientProps) {
  const [showNew, setShowNew] = useState(false);

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <h2 className="font-semibold">Shots</h2>
        <Button size="sm" className="gap-2" onClick={() => setShowNew(true)}>
          <Plus className="h-4 w-4" />
          New Shot
        </Button>
      </div>

      {shots.length === 0 ? (
        <div className="text-center py-10 text-muted-foreground border border-dashed border-border rounded-lg">
          <Film className="h-8 w-8 mx-auto mb-3 opacity-30" />
          <p className="text-sm">No shots yet</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
          {shots.map((shot) => (
            <ShotCard key={shot.id} shot={shot} projectId={projectId} />
          ))}
        </div>
      )}

      <NewShotDialog
        projectId={projectId}
        open={showNew}
        onClose={() => setShowNew(false)}
        onSuccess={() => setShowNew(false)}
      />
    </div>
  );
}