'use client';
import { Label } from '@/components/ui/label';
import { useState } from 'react';
import { SearchableSelect } from '@/components/ui/searchable-select';
import { useSession } from 'next-auth/react';
import { useVercelProjects } from '@/src/services/VercelService';
import { GetProjectsProjects } from '@vercel/sdk/models/getprojectsop.js';

interface VercelProjectSelectorProps {
  onProjectSelect: (project: GetProjectsProjects | null) => void;
  selectedProjectId?: string;
}

export function VercelProjectSelector({ onProjectSelect, selectedProjectId }: VercelProjectSelectorProps) {
  const [search, setSearch] = useState('');
  const { data: session } = useSession();
  const { projects, isLoading } = useVercelProjects(search, session?.user.vercelAccessToken);

  return (
    <div className="space-y-2">
      <Label>Vercel Project</Label>
      <SearchableSelect
        options={projects.map(project => ({
          label: project.name,
          value: project.id
        }))}
        value={selectedProjectId}
        onChange={(value) => {
          onProjectSelect(projects.find(p => p.id === value) ?? null);
        }}
        loading={isLoading}
        onSearch={setSearch}
        placeholder="Select a Vercel project..."
        isClearable
      />
    </div>
  );
} 