import { type PropsWithChildren } from 'react';

import { twMerge } from 'tailwind-merge';
import { tv } from 'tailwind-variants';

export interface InputGroupProps extends PropsWithChildren {
  className?: string;
  innerClassName?: string;
  isReadOnly?: boolean;
}
const style = tv({
  slots: {
    container: 'relative flex flex-col justify-center items-start bg-white',
    base: [
      'h-9',
      'flex',
      'items-center',
      'text-sm',
      'text-dabeeo-black-34',
      'leading-[18px]',
      'border',
      'border-dabeeo-gray-be',
      'has-data-focused:border-dabeeo-black-34',
      'has-data-hovered:border-dabeeo-black-34',
      'has-data-disabled:bg-dabeeo-gray-eb',
      'has-data-disabled:text-dabeeo-gray-99',
      'has-data-disabled:border-dabeeo-gray-be',
      'has-data-invalid:border-dabeeo-red',
      'has-data-invalid:has-data-focused:border-dabeeo-red',
      'has-data-invalid:has-data-hovered:border-dabeeo-red',
      'w-full',
      'has-[[type=number]]:leading-6',
    ],
    input: ['w-full', 'px-3', 'outline-0', '[&[type=number]]:pr-1.5'],
  },
  variants: {
    isReadOnly: {
      true: {
        base: 'bg-dabeeo-yellow-secondary has-data-hovered:border-dabeeo-gray-be has-data-focused:border-dabeeo-gray-be',
      },
    },
  },
});
export const InputGroup = ({ className, innerClassName, isReadOnly = false, children }: InputGroupProps) => {
  const styles = style({ isReadOnly });
  return (
    <div className={twMerge(styles.container(), className)}>
      <div className={twMerge(styles.base(), innerClassName)}>{children}</div>
    </div>
  );
};