'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { CheckCircle2, ThumbsUp } from 'lucide-react';

interface Project {
  id: string;
  title: string;
  category?: string;
}

interface AudienceVoteCardProps {
  project: Project;
  onVote: () => void;
  hasVoted: boolean;
}

export function AudienceVoteCard({ project, onVote, hasVoted }: AudienceVoteCardProps) {
  return (
    <Card className="mx-auto max-w-2xl">
      <CardHeader>
        <CardTitle className="text-2xl sm:text-3xl">{project.title}</CardTitle>
        {project.category && (
          <CardDescription className="mt-2">
            <Badge className="text-sm">{project.category}</Badge>
          </CardDescription>
        )}
      </CardHeader>
      <CardContent className="space-y-6">
        {hasVoted ? (
          <div className="flex flex-col items-center justify-center py-8">
            <CheckCircle2 className="mb-4 h-16 w-16 text-green-600" />
            <p className="text-xl font-medium">Thank You for Voting!</p>
            <p className="mt-2 text-sm text-muted-foreground">Your vote has been recorded</p>
          </div>
        ) : (
          <Button
            onClick={onVote}
            size="lg"
            className="w-full bg-[#de0f1e] py-8 text-lg font-semibold hover:bg-[#de0f1e]/90 sm:text-xl"
          >
            <ThumbsUp className="mr-3 h-6 w-6" />
            Vote for This Project
          </Button>
        )}
      </CardContent>
    </Card>
  );
}