import React from 'react';
import { AdPost } from '../types';
import { LinkIcon } from './icons/LinkIcon';
import { PhoneIcon } from './icons/PhoneIcon';
import { MailIcon } from './icons/MailIcon';
import { ChatBubbleIcon } from './icons/ChatBubbleIcon';
import { TagIcon } from './icons/TagIcon';

interface AdPostCardProps {
  ad: AdPost;
}

const AdPostCard: React.FC<AdPostCardProps> = ({ ad }) => {

  const getCtaIcon = (type: AdPost['cta']['type']) => {
    switch(type) {
      case 'website': return <LinkIcon className="w-5 h-5"/>;
      case 'call': return <PhoneIcon className="w-5 h-5"/>;
      case 'email': return <MailIcon className="w-5 h-5"/>;
      case 'whatsapp': return <ChatBubbleIcon className="w-5 h-5"/>;
      default: return null;
    }
  };

  const getCtaLink = () => {
    switch(ad.cta.type) {
      case 'website': return ad.cta.value;
      case 'call': return `tel:${ad.cta.value}`;
      case 'email': return `mailto:${ad.cta.value}`;
      case 'whatsapp': return `https://wa.me/${ad.cta.value.replace(/[^0-9]/g, '')}`;
      default: return '#';
    }
  };

  return (
    <div className="bg-background rounded-lg border-2 border-primary/20 shadow-sm">
      <div className="p-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center">
            <TagIcon className="w-6 h-6 text-primary"/>
          </div>
          <div>
            <p className="font-bold">Sponsored</p>
            <p className="text-sm text-muted-foreground">Promotional Content</p>
          </div>
        </div>
      </div>
      
      <div 
        className="overflow-hidden bg-muted" 
        style={{ aspectRatio: ad.mediaDimensions ? `${ad.mediaDimensions.width} / ${ad.mediaDimensions.height}` : '16 / 9' }}
      >
        {ad.mediaType === 'image' ? (
          <img 
            src={ad.mediaUrl} 
            alt={ad.caption} 
            className="w-full h-full object-cover" 
            loading="lazy"
          />
        ) : (
          <video 
            src={ad.mediaUrl} 
            poster={ad.posterUrl}
            controls 
            playsInline
            preload="metadata" 
            className="w-full h-full object-cover"
          >
            Your browser does not support the video tag.
          </video>
        )}
      </div>

      <div className="p-4">
        <p className="mb-4">{ad.caption}</p>
        
        <a 
          href={getCtaLink()}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center justify-center gap-2 w-full bg-primary text-primary-foreground font-bold py-2.5 px-6 rounded-lg hover:opacity-90 transition-opacity"
        >
          {getCtaIcon(ad.cta.type)}
          {ad.cta.label}
        </a>
      </div>
    </div>
  );
};

export default AdPostCard;