'use client';

import type { Prompt } from '@/lib/types';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Copy } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import { formatDistanceToNow } from 'date-fns';

interface PromptCardProps {
  prompt: Prompt;
}

export function PromptCard({ prompt }: PromptCardProps) {
  const { toast } = useToast();

  const handleCopy = () => {
    navigator.clipboard.writeText(prompt.content);
    toast({
      title: 'Prompt Copied!',
      description: 'The prompt text is now on your clipboard.',
    });
  };

  const timeAgo = formatDistanceToNow(new Date(prompt.createdAt), { addSuffix: true });

  return (
    <Card className="flex flex-col bg-white/5 backdrop-blur-lg border border-white/10 shadow-lg hover:border-white/20 transition-all duration-300 h-full">
      <CardHeader>
        <CardTitle className="text-base font-semibold">{prompt.title}</CardTitle>
        <CardDescription className="text-xs text-muted-foreground">{timeAgo}</CardDescription>
      </CardHeader>
      <CardContent className="flex-grow">
        <p className="text-sm text-foreground/80 line-clamp-4">
          {prompt.content}
        </p>
      </CardContent>
      <CardFooter className="flex flex-col items-start gap-4">
        <div className="flex flex-wrap gap-2">
          {prompt.tags.map((tag) => (
            <Badge key={tag} variant="secondary" className="bg-primary/20 text-primary-foreground/80 border-none">
              {tag}
            </Badge>
          ))}
        </div>
        <Button
          onClick={handleCopy}
          variant="ghost"
          size="sm"
          className="w-full justify-center group"
        >
          <Copy className="h-4 w-4 mr-2 group-hover:text-accent transition-colors" />
          Copy Prompt
        </Button>
      </CardFooter>
    </Card>
  );
}