import { type ReactNode } from 'react';
import { Box } from '@mui/material';

const tabId = (prefix: string, value: string) => `${prefix}-tab-${value}`;
const panelId = (prefix: string, value: string) => `${prefix}-tabpanel-${value}`;

export const tabA11yProps = (prefix: string, value: string) => ({
  id: tabId(prefix, value),
  'aria-controls': panelId(prefix, value)
});

interface TabPanelProps {
  value: string;
  active: string;
  idPrefix: string;
  children: ReactNode;
}

export const TabPanel = ({ value, active, idPrefix, children }: TabPanelProps) => (
  <Box
    role="tabpanel"
    hidden={value !== active}
    id={panelId(idPrefix, value)}
    aria-labelledby={tabId(idPrefix, value)}
  >
    {children}
  </Box>
);
