import { widgetAlign } from '@/config/enums/tip-tap';
import { cn } from '@/lib/utils';
import { QuoteProps } from '../../types/types';

export default function QuoteWidget({
  props,
  isNodeView = false
}: {
  props: QuoteProps;
  isNodeView?: boolean;
}) {
  if (!props) {
    return null;
  }
  const { text, variant } = props;

  return (
    <div
      className={cn('flex flex-col gap-2', !isNodeView && widgetAlign[variant])}
    >
      <svg
        className='fill-client-red size-24'
        width='67.531'
        height='57.997'
        viewBox='0 0 67.531 57.997'
      >
        <path
          d='M23.834.6h0c-5.561,2.383-10.328,4.767-14.3,7.945S3.178,16.49,1.589,20.462A111.562,111.562,0,0,0,0,38.735V56.213A2.537,2.537,0,0,0,2.383,58.6H27.012A2.537,2.537,0,0,0,29.4,56.213V31.585A2.537,2.537,0,0,0,27.012,29.2H17.478c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L26.218,1.394C25.423,1.394,24.629.6,23.834.6ZM60.38.6h0c-6.356,2.383-11.123,4.767-14.3,7.945-3.972,3.178-6.356,7.945-7.945,11.917-1.589,4.767-1.589,11.123-1.589,18.273V56.213A2.537,2.537,0,0,0,38.929,58.6H63.558a2.537,2.537,0,0,0,2.383-2.383V31.585A2.537,2.537,0,0,0,63.558,29.2H53.23c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L61.969,1.394A2.774,2.774,0,0,0,60.38.6Z'
          transform='translate(0 -0.6)'
        />
      </svg>
      <p className='text-3xl whitespace-pre-line italic'>{text}</p>
    </div>
  );
}