import type { Diario } from '@/app/models';
import { Button } from '@/views/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/views/components/ui/card';
import { CalendarIcon, DownloadIcon } from '@phosphor-icons/react';

interface DiarioCardProps {
  diario: Diario;
  onDownload?: (id: number) => void;
  onView?: (id: number) => void;
}

export function DiarioCard({ diario, onDownload, onView }: DiarioCardProps) {
  return (
    <Card className="group hover:shadow-xl transition-all duration-300 border hover:border-primary/30 dark:hover:border-primary/80 hover:-translate-y-1 h-full">
      <CardHeader className="pb-3">
        <div className="flex justify-between items-start">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-md bg-primary/20 dark:bg-blue-900/30 text-primary group-hover:bg-primary/20 dark:group-hover:bg-blue-900/50 transition-colors">
              <CalendarIcon className="h-5 w-5" />
            </div>
            <div>
              <CardTitle className="text-lg">{diario.data}</CardTitle>
              <p className="text-xs text-muted-foreground">
                Data de publicação
              </p>
            </div>
          </div>
          <span className="px-3 py-1 bg-primary/20 dark:bg-blue-900 text-primary rounded-full text-xs font-medium">
            {diario.tamanho}
          </span>
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        <div>
          <h3 className="font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-2">
            {diario.titulo}
          </h3>
          <p className="text-sm text-muted-foreground line-clamp-2">
            {diario.descricao}
          </p>
        </div>

        <div className="flex flex-col sm:flex-row gap-3 pt-2">
          <Button
            className="flex-1 bg-gradient-to-r from-primary to-primary/90 text-white"
            onClick={() => onDownload?.(diario.id)}>
            <DownloadIcon className="mr-2 h-4 w-4" />
            Baixar PDF
          </Button>

          <Button
            variant="outline"
            className="border-primary/20 text-primary hover:bg-primary/20 dark:border-primary/80"
            onClick={() => onView?.(diario.id)}>
            Visualizar
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
