src/components/DatasetCard.jsx

/**
 * Composant DatasetCard pour AfriDataHub
 * Created by BlackBenAI Team - AfriDataHub Platform
 */

import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
import {
  Calendar,
  Database,
  ExternalLink,
  TrendingUp,
  MapPin
} from 'lucide-react'

const DatasetCard = ({ dataset, onViewDetails }) => {
  const getDomainColor = (domain) => {
    const colors = {
      agriculture: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
      health: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
      economy: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
      weather: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400',
      energy: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
      education: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
      population: 'bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-400',
      environment: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
      transport: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400',
      other: 'bg-muted text-muted-foreground',
    }
    return colors[domain] || colors.other
  }

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('fr-FR', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    })
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -4, boxShadow: "0 10px 25px rgba(0,0,0,0.1)" }}
      transition={{ duration: 0.2 }}
      className="bg-card text-card-foreground rounded-xl border border-border p-6 hover:border-primary/50 transition-all duration-300 relative z-10"
    >
      {/* En-tête */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex-1">
          <h3 className="text-lg font-bold text-foreground mb-2 line-clamp-2">
            {dataset.title}
          </h3>
          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getDomainColor(dataset.domain)}`}>
            {dataset.domain}
          </span>
        </div>
      </div>

      {/* Description */}
      <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
        {dataset.description}
      </p>

      {/* Métadonnées */}
      <div className="space-y-2 mb-4">
        <div className="flex items-center text-sm text-muted-foreground">
          <Database className="h-4 w-4 mr-2" />
          <span>{dataset.data_points_count} points de données</span>
        </div>

        <div className="flex items-center text-sm text-muted-foreground">
          <Calendar className="h-4 w-4 mr-2" />
          <span>Mis à jour le {formatDate(dataset.last_updated)}</span>
        </div>

        <div className="flex items-center text-sm text-muted-foreground">
          <MapPin className="h-4 w-4 mr-2" />
          <span>Source: {dataset.source_name}</span>
        </div>
      </div>

      {/* Statut */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center">
          <div className={`w-2 h-2 rounded-full mr-2 ${dataset.status === 'active' ? 'bg-green-500' :
            dataset.status === 'updating' ? 'bg-yellow-500' : 'bg-red-500'
            }`} />
          <span className="text-sm text-muted-foreground capitalize">
            {dataset.status}
          </span>
        </div>

        {dataset.latest_data_date && (
          <div className="flex items-center text-sm text-muted-foreground">
            <TrendingUp className="h-4 w-4 mr-1" />
            <span>{formatDate(dataset.latest_data_date)}</span>
          </div>
        )}
      </div>

      {/* Actions */}
      <div className="flex items-center justify-between">
        <Button
          onClick={() => onViewDetails(dataset)}
          className="bg-primary hover:bg-primary/90 text-primary-foreground font-bold"
        >
          Voir les données
        </Button>

        {dataset.source_url && (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => window.open(dataset.source_url, '_blank')}
            className="text-primary hover:text-primary hover:bg-primary/10"
          >
            <ExternalLink className="h-4 w-4" />
          </Button>
        )}
      </div>
    </motion.div>
  )
}

export default DatasetCard