'use client';
import * as React from 'react';

type TabsContextValue = {
  value: string;
  setValue: (v: string) => void;
};
const TabsContext = React.createContext<TabsContextValue | null>(null);

type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
  defaultValue: string;
};

export function Tabs({ defaultValue, className = '', children, ...props }: TabsProps) {
  const [value, setValue] = React.useState(defaultValue);
  return (
    <TabsContext.Provider value={{ value, setValue }}>
      <div className={className} {...props}>{children}</div>
    </TabsContext.Provider>
  );
}

export function TabsList({ className = '', ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={`inline-flex w-full overflow-hidden rounded-md border bg-gray-50 p-1 ${className}`}
      {...props}
    />
  );
}

type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  value: string;
};

export function TabsTrigger({ value, className = '', ...props }: TriggerProps) {
  const ctx = React.useContext(TabsContext);
  if (!ctx) throw new Error('TabsTrigger must be used inside <Tabs>');

  const active = ctx.value === value;
  return (
    <button
      type="button"
      onClick={() => ctx.setValue(value)}
      className={`flex-1 px-4 py-2 text-sm rounded-md transition
        ${active ? 'bg-white border shadow-sm' : 'text-gray-600 hover:bg-white/60'}
        ${className}`}
      {...props}
    />
  );
}

type ContentProps = React.HTMLAttributes<HTMLDivElement> & { value: string };

export function TabsContent({ value, className = '', ...props }: ContentProps) {
  const ctx = React.useContext(TabsContext);
  if (!ctx) throw new Error('TabsContent must be used inside <Tabs>');
  if (ctx.value !== value) return null;
  return <div className={className} {...props} />;
}