import clsx from 'clsx';
import React from 'react';

import { PlusIcon } from '@/icons';

type Props = {
  title: string;
  onClick?: () => void;
  active?: boolean;
  icon?: React.FC<React.SVGProps<SVGSVGElement>>;
  renderRightContent?: () => React.ReactElement;
};

export const AdvancedSection = ({
  title,
  onClick,
  active = false,
  icon,
  renderRightContent,
}: Props) => {
  const IconComponent = icon;
  const innerContent = (
    <div
      className={clsx(
        'flex h-[60px] w-full flex-row items-center gap-4 rounded-full border-[0.5px] border-border-primary px-6 py-4 backdrop-blur-[100px]',
        {
          'hover:bg-white/10': !!onClick,
          'bg-white/5': !active,
          'bg-white/10': active,
        }
      )}
    >
      <div className='flex flex-1 flex-row gap-[5px] select-none'>
        {!!IconComponent ? <IconComponent className='h-5 w-5' /> : null}
        <span className='font-medium'>{title}</span>
      </div>
      <div>{!!renderRightContent ? renderRightContent() : <PlusIcon />}</div>
    </div>
  );
  return !!onClick ? (
    <button onClick={onClick}>{innerContent}</button>
  ) : (
    innerContent
  );
};