import { Building2, MapPin, Calendar } from 'lucide-react';
import { useCompanyPreview } from '@/hooks/preview/useCompanyPreview';
import { Badge } from '@/components/ui/badge';

interface CompanyPreviewCardProps {
  slug: string;
}

export function CompanyPreviewCard({ slug }: CompanyPreviewCardProps) {
  const { data: company, isLoading } = useCompanyPreview(slug);

  if (isLoading) {
    return (
      <div className="w-80">
        <div className="animate-pulse space-y-3">
          <div className="h-16 bg-muted rounded" />
          <div className="h-4 bg-muted rounded w-3/4" />
          <div className="h-4 bg-muted rounded w-1/2" />
        </div>
      </div>
    );
  }

  if (!company) {
    return (
      <div className="w-80 p-4 text-center text-muted-foreground">
        Company not found
      </div>
    );
  }

  const formatCompanyType = (type: string) => {
    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
  };

  return (
    <div className="w-80 space-y-3">
      {/* Header with logo */}
      <div className="flex items-start gap-3">
        {company.logo_url ? (
          <img 
            src={company.logo_url} 
            alt={company.name}
            className="w-12 h-12 object-contain rounded"
          />
        ) : (
          <div className="w-12 h-12 bg-muted rounded flex items-center justify-center">
            <Building2 className="w-6 h-6 text-muted-foreground" />
          </div>
        )}
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-base line-clamp-1">{company.name}</h3>
          <Badge variant="secondary" className="mt-1">
            {formatCompanyType(company.company_type)}
          </Badge>
        </div>
      </div>

      {/* Location and Founded */}
      <div className="space-y-2 text-sm">
        {company.headquarters_location && (
          <div className="flex items-center gap-2 text-muted-foreground">
            <MapPin className="w-4 h-4 flex-shrink-0" />
            <span className="line-clamp-1">{company.headquarters_location}</span>
          </div>
        )}
        {company.founded_year && (
          <div className="flex items-center gap-2 text-muted-foreground">
            <Calendar className="w-4 h-4 flex-shrink-0" />
            <span>Founded {company.founded_year}</span>
          </div>
        )}
      </div>
      
      <p className="text-xs text-muted-foreground">
        Click to view full details
      </p>
    </div>
  );
}