"use client"

import { css } from "@emotion/css"
import { Segmented } from "antd"
import classNames from "classnames"
import React from "react"

type Props = {
  value: string | number
  options: Array<{
    label: React.ReactNode | string
    value: string | number
    disabled?: boolean
    className?: string
  }>
  onChange: (value: string | number) => void
}

export default function SegmentedHeader({ value, options, onChange }: Props) {
  const CustomCss = css`
    .ant-segmented-thumb {
      background-color: var(--secondary-100);
      color: white;
      border-radius: 2rem;
    }
    .ant-segmented-item {
      color: var(--secondary-100);
      transition: background-color 0s !important;
      border-radius: 2rem;
      .ant-segmented-item-label {
        padding: 5px 8px;
      }
      &.ant-segmented-item-selected {
        background-color: var(--secondary-100);
        color: white;
      }
      @media (min-width: 1024px) {
        .ant-segmented-item-label {
          padding: 11px 20px;
        }
      }
    }
  `

  return (
    <div className={classNames("md:mr-4 max-w-full overflow-x-auto", CustomCss)}>
      <Segmented
        className="!bg-[var(--secondary-20)] md:!bg-white border border-[var(--secondary-20)] !rounded-[2rem]"
        options={options}
        onChange={onChange}
        value={value}
      />
    </div>
  )
}