import { Ionicons } from "@expo/vector-icons";
import { View } from "react-native";
import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";
import { Text } from "@/components/ui/Text";
import type { LineStatus } from "@/lib/stores/prescriptionStore";
import { colors } from "@/lib/theme";

const lineTone = {
  ready: "brand",
  review: "warn",
  unavailable: "danger",
} as const;

export function RxMedicineLines({
  medicines,
}: {
  medicines: { name: string; status: LineStatus }[];
}) {
  return (
    <Card elevated={false} padded={false}>
      {medicines.map((m, i) => (
        <View
          key={`${m.name}-${i}`}
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            paddingHorizontal: 16,
            paddingVertical: 14,
            borderBottomWidth: i === medicines.length - 1 ? 0 : 1,
            borderBottomColor: colors.line,
          }}
        >
          <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flex: 1 }}>
            <View
              style={{
                width: 36,
                height: 36,
                borderRadius: 12,
                backgroundColor: colors.brandSoft,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Ionicons name="medkit-outline" size={16} color={colors.brandText} />
            </View>
            <Text variant="h3" style={{ flex: 1 }}>
              {m.name}
            </Text>
          </View>
          <Badge label={m.status} tone={lineTone[m.status]} />
        </View>
      ))}
    </Card>
  );
}