import { cn } from '@/utils';
import * as React from 'react';
import styles from './Accordion.module.css';
import {
  Accordion as BaseAccordion,
  AccordionContent as BaseAccordionContent,
  AccordionItem as BaseAccordionItem,
  AccordionTrigger as BaseAccordionTrigger,
} from './BaseAccordion';
import baseStyles from './BaseAccordion.module.css';

type AccordionProps = React.ComponentProps<typeof BaseAccordion>;
type AccordionItemProps = React.ComponentProps<typeof BaseAccordionItem>;
type AccordionTriggerProps = React.ComponentProps<typeof BaseAccordionTrigger>;
type AccordionContentProps = React.ComponentProps<typeof BaseAccordionContent>;

const Accordion = React.forwardRef<
  React.ElementRef<typeof BaseAccordion>,
  AccordionProps
>(({ className, ...props }, ref) => (
  <BaseAccordion
    ref={ref}
    className={cn(styles.Accordion, className)}
    {...props}
  />
));
Accordion.displayName = 'Accordion';

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof BaseAccordionItem>,
  AccordionItemProps
>(({ className, ...props }, ref) => (
  <BaseAccordionItem
    ref={ref}
    className={cn(baseStyles.AccordionItem, styles.AccordionItem, className)}
    {...props}
  />
));
AccordionItem.displayName = 'AccordionItem';

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof BaseAccordionTrigger>,
  AccordionTriggerProps
>(({ className, ...props }, ref) => (
  <BaseAccordionTrigger
    ref={ref}
    className={cn(
      baseStyles.AccordionTrigger,
      styles.AccordionTrigger,
      className,
    )}
    {...props}
  />
));
AccordionTrigger.displayName = 'AccordionTrigger';

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof BaseAccordionContent>,
  AccordionContentProps
>(({ className, ...props }, ref) => (
  <BaseAccordionContent
    ref={ref}
    className={cn(
      baseStyles.AccordionContent,
      styles.AccordionContent,
      className,
    )}
    {...props}
  />
));
AccordionContent.displayName = 'AccordionContent';

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
