'use client';

import React from 'react';
import { useTranslations } from 'next-intl';
import { ChevronRight } from 'lucide-react';
import type { Organization } from '@/types/organization';
import { organizationTypeIcon } from '@/components/shared/organizationTypeIcon';

interface OrganizationCardProps {
  organization: Organization;
  onSelect: (id: string) => void;
}

export const OrganizationCard: React.FC<OrganizationCardProps> = ({
  organization,
  onSelect,
}) => {
  const t = useTranslations('organizations');
  const tAuth = useTranslations('auth');
  const Icon = organizationTypeIcon(organization.type);
  const typeText =
    organization.type === 'CLINIC' ? tAuth('dentalClinic') : tAuth('dentalLab');

  return (
    <button
      onClick={() => onSelect(organization.id)}
      className="w-full surface-card p-6 hover:border-primary/60 transition-all text-left flex items-center gap-4 group"
    >
      <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
        <Icon className="h-8 w-8 icon-flat" />
      </div>
      <div className="flex-1">
        <h3 className="text-lg font-semibold text-text-primary">{organization.name}</h3>
        <p className="text-sm text-text-secondary">{typeText}</p>
        {organization.plan && (
          <p className="text-xs text-text-muted mt-1">
            {t('planLabel', {
              name: organization.plan.name,
              maxUsers: organization.plan.maxUsers,
            })}
          </p>
        )}
      </div>
      <ChevronRight className="h-5 w-5 icon-flat text-text-muted group-hover:text-primary transition-colors" />
    </button>
  );
};
