import React from 'react';

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

interface CommercialRightsNeededPanelProps {
  downloadsRemaining: number;
  canDownload: boolean;
  onDownload: () => void;
  onUpgrade: () => void;
}

export const CommercialRightsNeededPanel: React.FC<
  CommercialRightsNeededPanelProps
> = ({ downloadsRemaining, canDownload, onDownload, onUpgrade }) => {
  return (
    <>
      <div className='mb-6 flex justify-center'>
        <div className='flex h-16 w-16 items-center justify-center rounded-full bg-foreground-primary/10'>
          <DownloadIcon className='h-8 w-8 text-foreground-primary' />
        </div>
      </div>

      <h2 className='mb-8 font-serif text-4xl font-light whitespace-pre text-foreground-primary'>
        Need Commercial Rights?
      </h2>

      <p className='mb-6 text-base leading-snug text-foreground-secondary'>
        Only <span className='font-bold'>Pro</span> and{' '}
        <span className='font-bold'>Premier</span> songs are eligible for
        commercial use.
      </p>

      <p className='mb-6 text-base leading-snug text-foreground-secondary'>
        <span className='font-bold'>Upgrade now</span> and you&apos;ll have
        commercial rights for this song as well.
      </p>

      <div className='mt-8 flex flex-col gap-3'>
        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          variant={ButtonVariant.Aura}
          onClick={onUpgrade}
          className='w-full text-lg font-medium'
        >
          Purchase song or Subscribe
        </Button>

        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          onClick={canDownload ? onDownload : () => {}}
          disabled={!canDownload}
          className='w-full border border-border-primary bg-background-tertiary text-foreground-primary hover:enabled:bg-background-primary'
        >
          Download without commercial rights
        </Button>
      </div>

      <p className='mt-8 text-sm text-foreground-tertiary'>
        {downloadsRemaining} free downloads left this month
      </p>
    </>
  );
};