import { ArrowRightCircle } from 'lucide-react';
import React from 'react';


interface ChannelCardProps {
  channelLogoSrc: string;
  altText: string;
  youtubeVideoUrl: string;
}

const ChannelCard: React.FC<ChannelCardProps> = ({ channelLogoSrc, altText, youtubeVideoUrl }) => {
  const openYoutubeVideo = () => {
    window.open(youtubeVideoUrl, '_blank');
  };

  return (
    <div className="flex snap-center cursor-pointer group" onClick={openYoutubeVideo} >
      <div className="relative w-[358px] h-[194px] bg-primary-foreground rounded-[20px] snap-center hover:bg-[#FFE9BA]">
        <img
        draggable="false"
          src={channelLogoSrc}
          alt={altText}
          className="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]"
        />
        <ArrowRightCircle
          size={45}
          className="rotate-[315deg] text-primary absolute top-2 right-2 group-hover:rotate-[360deg] cursor-pointer transition-all duration-300"
          onClick={openYoutubeVideo}
        />
      </div>
    </div>
  );
};

export default ChannelCard;