import { Switch } from '@/components/ui/switch';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Sparkles } from 'lucide-react';

interface AIFeaturesProps {
  aiRemarkGeneration: boolean;
  onRemarkGenerationChange: (enabled: boolean) => void;
}

export function AIFeatures({
  aiRemarkGeneration,
  onRemarkGenerationChange
}: AIFeaturesProps) {
  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Sparkles className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">AI Features</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Enable/disable specific AI-powered features
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="flex items-center justify-between p-4 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 transition-colors">
            <div>
              <p className="font-medium text-sm">AI Remark Generation</p>
              <p className="text-xs text-muted-foreground">
                Automatically generate conclusion remarks for workflow closures
              </p>
            </div>
            <Switch
              checked={aiRemarkGeneration}
              onCheckedChange={onRemarkGenerationChange}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
