import Box from '@material-hu/mui/Box';

import HuTabs from '@material-hu/components/design-system/Tabs';

import { type MessageReaction } from 'src/pages/dashboard/Conversations/types';

type ReactionsTabsProps = {
  reactions: MessageReaction[];
  selectedTab: number;
  onTabChange: (value: number) => void;
};

export const ReactionsTabs = ({
  reactions,
  selectedTab,
  onTabChange,
}: ReactionsTabsProps) => {
  const tabs = reactions.map((reaction, index) => ({
    label: `${reaction.name} ${reaction.count}`,
    value: index.toString(),
  }));

  const handleTabChange = (value: string) => {
    onTabChange(Number(value));
  };

  return (
    <Box
      sx={{
        overflowX: 'auto',
        overflowY: 'hidden',
        msOverflowStyle: 'none' /* IE and Edge */,
        scrollbarWidth: 'none' /* Firefox */,
        '&::-webkit-scrollbar': {
          display: 'none' /* Chrome, Safari and Opera */,
        },
      }}
    >
      <HuTabs
        value={selectedTab.toString()}
        onTabChange={handleTabChange}
        tabs={tabs}
        sx={{
          minWidth: 'max-content',
        }}
      />
    </Box>
  );
};

export default ReactionsTabs;