import React from 'react';
import styled from 'styled-components';

import type { BaseSyntheticEvent, JSX, ReactNode } from 'react';

export type AccordionHeaderProps = {
  isExpandable?: boolean;
  expanded?: boolean;
  disabled?: boolean;
  children?: ReactNode;
  className?: string;
  onClick?: (e: BaseSyntheticEvent) => void;
};

type AccordionHeaderWrapperProps = {
  $isExpandable?: boolean;
  $expanded?: boolean;
  $disabled?: boolean;
};

export function AccordionHeader({
  isExpandable,
  expanded,
  disabled,
  children,
  className,
  onClick,
}: AccordionHeaderProps): JSX.Element {
  return (
    <AccordionHeaderWrapper
      className={className}
      $isExpandable={isExpandable}
      $expanded={expanded}
      $disabled={disabled}
      onClick={onClick}
      data-component-name="Accordion/AccordionHeader"
    >
      {children}
    </AccordionHeaderWrapper>
  );
}

const AccordionHeaderWrapper = styled.div<AccordionHeaderWrapperProps>`
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  color: var(--accordion-header-text-color);

  cursor: ${({ $isExpandable = true }) => ($isExpandable ? 'pointer' : 'default')};

  line-height: var(--accordion-header-line-height);
  font-size: var(--accordion-header-font-size);
  font-family: var(--accordion-header-font-family);
  font-weight: var(--accordion-header-font-weight);
  padding: var(--accordion-header-padding);
  border: var(--accordion-header-border);
  background-color: var(--accordion-header-bg-color);
  border-radius: var(--accordion-border-radius);

  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};

  &:hover {
    color: ${({ $isExpandable = true }) =>
      $isExpandable ? 'var(--text-color-primary)' : 'var(--accordion-header-text-color)'};
  }
`;