/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { styled } from 'storybook/internal/theming';

import AnimatedTabs, {
  Option,
} from '@/app/(root)/create/createV2/componentsQ3/AnimatedTabs';
import { HeaderContainer } from '@/app/(root)/create/createV2/componentsQ3/CreateHeader';

const Wrapper = styled(HeaderContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  gap: 8px;
  padding: 0 16px;
  height: 49px;
`;

export default function StudioObjectHeader<T extends string>({
  tabOptions,
  activeTab,
  onTabChange,
}: {
  tabOptions: Option<T>[];
  activeTab: T;
  onTabChange: (option: Option<T>) => void;
}) {
  return (
    <Wrapper borderBottom>
      <AnimatedTabs
        options={tabOptions}
        value={activeTab}
        onChange={onTabChange}
      />
    </Wrapper>
  );
}