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

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

export type AccordionTitleProps = {
  children?: ReactNode;
  className?: string;
};

export function AccordionTitle({ children, className }: AccordionTitleProps): JSX.Element {
  return (
    <AccordionTitleWrapper className={className} data-component-name="Accordion/AccordionTitle">
      {children}
    </AccordionTitleWrapper>
  );
}

const AccordionTitleWrapper = styled.span`
  font-weight: var(--accordion-header-font-weight);
  line-height: var(--line-height-base);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accordion-header-text-color);
  flex: 1;
`;