import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';

export default function SettingsCompany({ settings }: any) {
    const { data, setData, put, processing } = useForm({ ...settings });
    const fi = (label: string, key: string, type='text') => <div><label className="block text-sm font-medium mb-1">{label}</label><input type={type} value={data[key]??''} onChange={e=>setData(key as any,e.target.value)} className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"/></div>;
    return (
        <AuthenticatedLayout header="Company Settings">
            <Head title="Company Settings" />
            <form onSubmit={e=>{e.preventDefault();put('/settings/company')}} className="max-w-2xl bg-white rounded-lg border border-border shadow-sm p-6 space-y-4">
                {fi('Company Name *','company_name')}
                {fi('Tagline','company_tagline')}
                {fi('Address','company_address')}
                {fi('Phone','company_phone')}
                {fi('Email','company_email','email')}
                {fi('Reg No (SSM)','reg_no')}
                {fi('SST No','sst_no')}
                <div><label className="block text-sm font-medium mb-1">Header Color</label><div className="flex gap-3 items-center"><input type="color" value={data.header_color??'#0f172a'} onChange={e=>setData('header_color' as any,e.target.value)} className="w-12 h-10 rounded cursor-pointer border"/><input type="text" value={data.header_color??''} onChange={e=>setData('header_color' as any,e.target.value)} className="flex-1 border rounded-md px-3 py-2 text-sm"/></div></div>
                {fi('Logo URL','logo_url')}
                <Button type="submit" disabled={processing}>Save Settings</Button>
            </form>
        </AuthenticatedLayout>
    );
}
