import { cn } from './utils';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react';

export type ContainerProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;

const variants = cva('flex min-h-[36px] items-center', {
  defaultVariants: {
    intent: 'default',
  },
  variants: {
    intent: {
      danger: '[&>*]:border-red-500 [&>*>*]:border-red-500',
      default: '',
    },
  },
});

export type WrapperProps = HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof variants> & { readonly message?: string };

export const ElementContainer = forwardRef<HTMLDivElement, WrapperProps>(
  ({ children, className, id, intent, message = 'Некорректные данные', title, ...props }, ref) => (
    <div {...props} className="flex flex-col justify-center" ref={ref} {...props}>
      <label
        htmlFor={id}
        className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
      >
        {title}
      </label>
      <div className={cn(variants({ className, intent }))}>{children}</div>
      <div className="mt-1 text-xs text-red-500 transition-all ease-in-out">
        {intent === 'danger' ? message : <div className="my-4" />}
      </div>
    </div>
  )
);