import clsx from 'clsx';
import React from 'react';
import { twMerge } from 'tailwind-merge';

import { PauseIcon, PlayIcon, PulsingLinesIcon } from '@/icons';

type Props = {
  icon: 'play' | 'pause' | 'playing' | 'slaying';
} & React.HTMLAttributes<HTMLButtonElement>;

const CardPlayPauseButton: React.FC<Props> = (props) => {
  const { className, icon, ...restProps } = props;
  return (
    <button
      className={twMerge(
        clsx(
          'flex items-center justify-center',
          'h-14 w-14 rounded-full p-4',
          'bg-background-primary/60 backdrop-blur-xl',
          'border-none outline-none'
        ),
        className
      )}
      {...restProps}
    >
      {icon === 'playing' ? (
        <PulsingLinesIcon className='h-6 w-6' />
      ) : icon === 'pause' ? (
        <PauseIcon className='h-5 w-5' />
      ) : (
        <PlayIcon className='h-5 w-5' />
      )}
    </button>
  );
};

export default CardPlayPauseButton;