import React, { type FC } from "react";

interface GroupProps {
  children?: React.ReactNode;
}

const Group: FC<GroupProps> = ({ children }) => {
  const buttonClasses =
    "[&>button]:border-e-0! [&>button:not(:first-child):not(:last-child)]:rounded-none! [&>button:first-child]:rounded-e-none! [&>button:last-child]:rounded-s-none! [&>button:last-child]:border-e!";

  const inputClasses =
    "[&>div>div>input]:border-e-0! [&>div:not(:first-child):not(:last-child)>div>input]:rounded-none! [&>div:first-child>div>input]:rounded-e-none! [&>div:last-child>div>input]:rounded-s-none! [&>div:last-child>div>input]:border-e!";

  const selectClasses =
    "[&>div>div>div>select]:border-e-0! [&>div:not(:first-child):not(:last-child)>div>div>select]:rounded-none! [&>div:first-child>div>div>select]:rounded-e-none! [&>div:last-child>div>div>select]:rounded-s-none! [&>div:last-child>div>div>select]:border-e!";

  const comboboxClasses =
    "[&>div>div>div>input]:border-e-0! [&>div:not(:first-child):not(:last-child)>div>div>input]:rounded-none! [&>div:first-child>div>div>input]:rounded-e-none! [&>div:last-child>div>div>input]:rounded-s-none! [&>div:last-child>div>div>input]:border-e!";

  const listboxClasses =
    "[&>div>div>div>button]:border-e-0! [&>div:not(:first-child):not(:last-child)>div>div>button]:rounded-none! [&>div:first-child>div>div>button]:rounded-e-none! [&>div:last-child>div>div>button]:rounded-s-none! [&>div:last-child>div>div>button]:border-e!";

  return (
    <div
      className={`flex ${buttonClasses} ${inputClasses} ${selectClasses} ${comboboxClasses} ${listboxClasses}`}
    >
      {children}
    </div>
  );
};

export default Group;
