'use client';

import { useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { handleSetLocale } from '@/lib/actions';

type Translation = {
  language: string;
  languageDescription: string;
  english: string;
  arabic: string;
};

type Props = {
  t: Translation;
  currentLocale: string;
};

export function LanguageSwitcher({ t, currentLocale }: Props) {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();

  const onSelectLocale = (locale: 'en' | 'ar') => {
    startTransition(async () => {
      await handleSetLocale(locale);
      router.refresh();
    });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t.language}</CardTitle>
        <CardDescription>{t.languageDescription}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex gap-4">
          <Button
            variant={currentLocale === 'en' ? 'default' : 'outline'}
            onClick={() => onSelectLocale('en')}
            disabled={isPending || currentLocale === 'en'}
          >
            {t.english}
          </Button>
          <Button
            variant={currentLocale === 'ar' ? 'default' : 'outline'}
            onClick={() => onSelectLocale('ar')}
            disabled={isPending || currentLocale === 'ar'}
          >
            {t.arabic}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}