import { Building } from "lucide-react";
import { Skeleton } from "@/shared/common/ui/skeleton";
import { useLocalizedName } from "@/shared/common/localizedName";

interface Unit {
  id: string;
  name: {
    en: string;
    am: string;
  };
}

interface UnitListProps {
  organizationId: string;
  selectedUnitId: string;
  onSelectUnit: (id: string) => void;
  units: Unit[];
  isLoading: boolean;
  searchQuery: string;
}

export const UnitList = ({
  organizationId,
  selectedUnitId,
  onSelectUnit,
  units,
  isLoading,
  searchQuery,
}: UnitListProps) => {
  const localizedName = useLocalizedName();

  const filteredUnits = units.filter((unit) =>
    localizedName(unit.name).toLowerCase().includes(searchQuery.toLowerCase())
  );

  if (!organizationId) {
    return (
      <div className="text-center py-8 text-gray-500">
        Select an organization first
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="space-y-2">
        {[1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-12 w-full" />
        ))}
      </div>
    );
  }

  if (filteredUnits.length === 0) {
    return <div className="text-center py-8 text-gray-500">No units found</div>;
  }

  return (
    <div className="space-y-2">
      {filteredUnits.map((unit) => (
        <button
          key={unit.id}
          onClick={() => onSelectUnit(unit.id)}
          className={`w-full text-left p-3 rounded-lg border transition-colors ${
            selectedUnitId === unit.id
              ? "bg-purple-50 border-purple-500 text-purple-700"
              : "bg-white border-gray-200 hover:bg-gray-50"
          }`}
        >
          <div className="flex items-center gap-2">
            <Building className="h-4 w-4" />
            <span className="font-medium">{localizedName(unit.name)}</span>
          </div>
        </button>
      ))}
    </div>
  );
};
