import { Collapse } from '@mui/material';
import type { PropsWithChildren, ReactNode } from 'react';
import { useId } from 'react';
import { Card } from '../../../components/Card/Card.js';
import {
  CardRowButton,
  CardTitleContainer,
  CardValue,
} from '../../../components/Card/CardButton.style.js';
// import { useSettingsCardExpandable } from './SettingsAccordian.js';
import type { SettingCardTitle } from './types.js';

interface SettingCardExpandableProps extends SettingCardTitle {
  value: ReactNode;
}

export const SettingCardExpandable: React.FC<
  PropsWithChildren<SettingCardExpandableProps>
> = ({ icon, title, value, children }) => {
  // const { expanded, toggleExpanded } = useSettingsCardExpandable();
  const buttonId = useId();
  const collapseId = useId();

  const expanded = true; // Hardcode expanded all settings card

  return (
    <Card sx={{ p: 1 }}>
      <CardRowButton
        id={buttonId}
        aria-expanded={expanded}
        aria-controls={collapseId}
        onClick={() => {}}
        disableRipple
        sx={{ p: 1 }}
      >
        <CardTitleContainer>
          {icon}
          <CardValue>{title}</CardValue>
        </CardTitleContainer>
        {!expanded && value}
      </CardRowButton>
      <Collapse
        id={collapseId}
        role="region"
        aria-labelledby={buttonId}
        in={expanded}
      >
        {children}
      </Collapse>
    </Card>
  );
};