import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { AppleIcon, PlaystoreIcon, StarIcon } from '@/icons';

interface AppRatingCardProps {
  platform: 'ios' | 'android';
  rating: string;
  reviewCount: string;
  onDownloadClick: () => void;
  topBadge?: string;
  downloadText?: string;
}

const AppRatingCard: React.FC<AppRatingCardProps> = ({
  platform,
  rating,
  reviewCount,
  onDownloadClick,
  topBadge,
  downloadText,
}) => {
  const isIOS = platform === 'ios';
  const PlatformIcon = isIOS ? AppleIcon : PlaystoreIcon;
  const defaultDownloadText = isIOS
    ? 'Download on iPhone'
    : 'Download on Android';
  const finalDownloadText = downloadText || defaultDownloadText;
  const finalTopBadge = topBadge || 'Top 10 music app';

  return (
    <div className='flex h-full flex-col rounded-[20px] border border-white/20 bg-background-smoke-thick p-6 text-left'>
      <div className='mb-10 flex items-center gap-4 md:mb-[72px]'>
        <PlatformIcon className='h-6 w-6 text-white' />
        <span className='text-2xl font-medium text-white'>{finalTopBadge}</span>
      </div>

      <div className='mb-3 flex flex-col'>
        <div className='mb-2 flex items-center gap-2'>
          <span className='text-[40px] leading-none font-normal text-white'>
            {rating}
          </span>
          <StarIcon className='h-6 w-6 text-accent-yellow' />
        </div>
        <span className='text-base text-white/70'>{reviewCount}</span>
      </div>

      <Button
        variant={ButtonVariant.Primary}
        size={ButtonSize.Large}
        shape={ButtonShape.Pill}
        icon={<PlatformIcon className='h-5 w-5' />}
        onClick={onDownloadClick}
        className='w-full border-0 bg-white py-3 text-black hover:bg-white/90'
      >
        {finalDownloadText}
      </Button>
    </div>
  );
};

export default AppRatingCard;