import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Sliders } from 'lucide-react';

interface AIParametersProps {
  maxRemarkChars: number;
  onMaxRemarkCharsChange: (chars: number) => void;
}

export function AIParameters({
  maxRemarkChars,
  onMaxRemarkCharsChange
}: AIParametersProps) {
  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Sliders className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">AI Parameters</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Configure AI generation parameters
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          <Label htmlFor="max-remark-chars" className="text-sm font-medium">
            Maximum Remark Length
          </Label>
          <Input
            id="max-remark-chars"
            type="number"
            min="500"
            max="5000"
            value={maxRemarkChars}
            onChange={(e) => onMaxRemarkCharsChange(parseInt(e.target.value) || 2000)}
            className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
          />
          <p className="text-xs text-muted-foreground">
            Maximum character length for AI-generated conclusion remarks (500-5000 characters)
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
