"use client";

import { motion } from "framer-motion";
import { useState, useEffect } from "react";

interface Option {
    id: string;
    label: string;
}

interface SegmentedControlProps {
    options: Option[];
    defaultValue?: string;
    onChange: (id: string) => void;
    value?: string;
    className?: string;
}

export default function SegmentedControl({
    options,
    defaultValue,
    onChange,
    value: controlledValue,
    className = "",
}: SegmentedControlProps) {
    const [activeTab, setActiveTab] = useState(controlledValue || defaultValue || options[0].id);

    useEffect(() => {
        if (controlledValue) {
            setActiveTab(controlledValue);
        }
    }, [controlledValue]);

    const handleToggle = (id: string) => {
        setActiveTab(id);
        onChange(id);
    };

    return (
        // ─── VERTICAL POSITION ───────────────────────────────────────────────────
        // To move the control UP: reduce "my-2 md:my-3" (e.g. → "my-1 md:my-2")
        // To move it DOWN: increase those values
        <div className={`flex justify-center my-1 md:my-1 ${className}`} dir="rtl">

            {/* ─── WIDTH ──────────────────────────────────────────────────────────
                To make it NARROWER: reduce max-w values (e.g. max-w-[260px] md:max-w-[360px])
                To make it WIDER:   increase max-w values
            ─────────────────────────────────────────────────────────────────── */}
            <div className={`relative flex bg-slate-100/80 backdrop-blur-sm p-0.5 rounded-full w-full border border-slate-200 ${className.includes('w-fit') ? 'max-w-fit min-w-[160px]' : 'max-w-[200px] md:max-w-[300px]'}`}>
                {options.map((option) => (
                    <button
                        key={option.id}
                        onClick={() => handleToggle(option.id)}
                        // ─── HEIGHT / THICKNESS ──────────────────────────────────────────
                        // To make it THINNER: reduce py values (e.g. → "py-0.5 md:py-1")
                        // To make it TALLER:  increase py values (e.g. → "py-2 md:py-3")
                        // ────────────────────────────────────────────────────────────────
                        className={`relative flex-1 py-1 md:py-1.5 px-4 md:px-6 text-[13px] md:text-base font-medium transition-colors duration-200 rounded-full flex items-center justify-center ${activeTab === option.id ? "text-white" : "text-gray-500 hover:text-gray-700"
                            }`}
                    >
                        {activeTab === option.id && (
                            <motion.div
                                layoutId="activeTabBackground"
                                className="absolute inset-0 bg-[#052531] rounded-full shadow-md"
                                transition={{ type: "spring", stiffness: 400, damping: 30 }}
                            />
                        )}
                        <span className="relative z-10 whitespace-nowrap">{option.label}</span>
                    </button>
                ))}
            </div>
        </div>
    );
}