import MuiDivider from "@mui/material/Divider";
import type { SxProps, Theme } from "@mui/material/styles";

type AppDividerProps = {
  /** Extra MUI sx overrides */
  sx?: SxProps<Theme>;
  /** Orientation — defaults to horizontal */
  orientation?: "horizontal" | "vertical";
};

/**
 * Thin 1px divider matching the Figma design token:
 *   Natural Color / 200  → #E9EAEB (light mode)
 *   Dark border          → rgba(255,255,255,0.12) (dark mode)
 *
 * Usage:
 *   <AppDivider />
 *   <AppDivider sx={{ my: 2 }} />
 */
export function AppDivider({ sx, orientation = "horizontal" }: AppDividerProps) {
  return (
    <MuiDivider
      orientation={orientation}
      flexItem={orientation === "vertical"}
      sx={{
        borderColor: "var(--app-divider, #E9EAEB)",
        borderWidth: "1px 0 0 0",
        ...(orientation === "vertical" && {
          borderWidth: "0 0 0 1px",
        }),
        ...sx,
      }}
    />
  );
}