/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import Image from "next/image";

import { useLocale } from "@/hooks/useLocale";

export interface CardListProps {
  id: string;
  cardNumber: string;
  cardAlias: string;
  cardDate: string;
  isSelected: boolean;
  setSelectCardId: () => void;
  onDeleteCard: () => void;
}

const CardListItem = (props: CardListProps) => {
  const { t } = useLocale();
  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between">
        <div
          onClick={() => props.setSelectCardId()}
          className="flex cursor-pointer items-center"
        >
          <input
            className="mr-2 size-[16px] rounded-md border border-primary-500 accent-primary-500"
            type="radio"
            name={props.id}
            id={props.id}
            checked={props.isSelected}
          />
          <span className="text-[10px] text-gray-500">{props.cardAlias}</span>
        </div>
        <div
          onClick={props.onDeleteCard}
          className="!h-auto cursor-pointer !p-0 text-xs text-primary-500"
        >
          {t("Delete")}
        </div>
      </div>

      <div onClick={() => props.setSelectCardId()} className="w-[166px]">
        <div
          data-active={props.isSelected}
          className="h-[104px] cursor-pointer rounded-primary border bg-gray-50 data-[active=true]:border-primary-500"
        >
          <div className="flex h-full flex-col justify-between p-2">
            <div className="flex justify-end">
              <Image
                src="/assets/images/mastercard.png"
                alt="chip"
                width={24}
                height={24}
              />
            </div>
            <div className="flex flex-col items-end justify-end gap-2 whitespace-nowrap text-xs font-medium text-gray-500">
              <span>{props.cardNumber}</span>
              <span>{props.cardDate}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export { CardListItem };