
import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface ProjectBasicFieldsProps {
  title: string;
  category: 'website' | 'ai' | 'webapp';
  description: string;
  onTitleChange: (value: string) => void;
  onCategoryChange: (value: 'website' | 'ai' | 'webapp') => void;
  onDescriptionChange: (value: string) => void;
}

const ProjectBasicFields = ({
  title,
  category,
  description,
  onTitleChange,
  onCategoryChange,
  onDescriptionChange
}: ProjectBasicFieldsProps) => {
  return (
    <>
      <div>
        <Label htmlFor="title">Titre *</Label>
        <Input
          id="title"
          value={title}
          onChange={(e) => onTitleChange(e.target.value)}
          required
        />
      </div>

      <div>
        <Label>Catégorie *</Label>
        <Select 
          value={category} 
          onValueChange={onCategoryChange}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="website">Site Web</SelectItem>
            <SelectItem value="webapp">Web App</SelectItem>
            <SelectItem value="ai">Agent IA</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="description">Description *</Label>
        <Textarea
          id="description"
          value={description}
          onChange={(e) => onDescriptionChange(e.target.value)}
          rows={3}
          required
        />
      </div>
    </>
  );
};

export default ProjectBasicFields;
