import { useState } from "react";
import {
  HvBaseSwitch,
  HvButtonBase,
  theme,
} from "@hitachivantara/uikit-react-core";


export default function Demo() {
  const [checked, setChecked] = useState(false);


  return (
    <HvButtonBase
      className="relative items-center rounded-full [&_.HvBaseSwitch-root]:bg-transparent"
      onClick={() => setChecked((prev) => !prev)}
      component="div"
    >
      <HvBaseSwitch
        size="medium"
        value="on"
        checked={checked}
        aria-label="Switch"
        onChange={(_evt, newChecked) => setChecked(newChecked)}
        color={checked ? "warning" : "border"}
      />
      <div
        className="bg-white border-1 border-borderString rounded-full w-28px h-28px flex items-center justify-center absolute top-[calc-(50%-14px)] cursor-pointer transition-left duration-200 ease"
        style={{
          left: checked ? "calc(100% - 32px)" : "calc(0% + 4px)",
          borderColor: checked
            ? theme.colors.warning
            : theme.colors.borderStrong,
        }}
      >
        {checked ? <div className="i-ph-sun" /> : <div className="i-ph-moon" />}
      </div>
    </HvButtonBase>
  );
}

import { useState } from "react";
import {
  HvSection,
  HvSwitch,
  HvTypography,
} from "@hitachivantara/uikit-react-core";


const settings = [
  {
    id: "email",
    label: "Email notifications",
    description: "Receive updates and alerts by email",
    defaultChecked: true,
  },
  {
    id: "push",
    label: "Push notifications",
    description: "Receive real-time push alerts",
    defaultChecked: false,
  },
  {
    id: "sms",
    label: "SMS notifications",
    description: "Receive text messages for critical events",
    defaultChecked: false,
  },
  {
    id: "weekly",
    label: "Weekly digest",
    description: "Get a summary report every Monday",
    defaultChecked: true,
  },
];


export default function Demo() {
  const [values, setValues] = useState<Record<string, boolean>>(
    Object.fromEntries(settings.map((s) => [s.id, s.defaultChecked])),
  );


  return (
    <HvSection
      title={
        <HvTypography variant="title4">Notification Preferences</HvTypography>
      }
      className="max-w-sm w-full"
    >
      <div className="flex flex-col gap-sm">
        {settings.map((setting) => (
          <div
            key={setting.id}
            className="flex items-center justify-between gap-md"
          >
            <div>
              <HvTypography variant="label">{setting.label}</HvTypography>
              <HvTypography variant="caption1" className="color-textSubtle">
                {setting.description}
              </HvTypography>
            </div>
            <HvSwitch
              aria-label={setting.label}
              checked={values[setting.id]}
              onChange={(_, checked) =>
                setValues((prev) => ({ ...prev, [setting.id]: checked }))
              }
            />
          </div>
        ))}
      </div>
    </HvSection>
  );
}