import {
  PanelEditorWrapperProps,
  PanelEditorProps,
} from '@components/DesignPanel/types';

import { Icon } from '@components/ui/Icon';
import { ButtonToggle } from '@components/ui/ButtonToggle';

export const PanelBookmarks: React.FC<PanelEditorWrapperProps> = ({
  panels,
  setPanelId = null,
}) => {
  return (
    <div className="mt-4 grid grid-cols-4 items-center gap-2">
      {panels.slice(0, 8).map(({ id, label, icon }: PanelEditorProps) => (
        <ButtonToggle
          key={id}
          value={id}
          defaultPressed={null}
          label={label}
          className="flex !h-14 !w-14 items-center justify-center !rounded-full bg-easy hover:bg-slate-300"
          onPressedChange={() => setPanelId(id)}
        >
          {icon && typeof icon === 'function' && (
            <Icon className="h-5 w-5" icon={icon} />
          )}
        </ButtonToggle>
      ))}
    </div>
  );
};

export default PanelBookmarks;