import { Badge } from 'components/common';

export type KlaviyoListTypes = {
  id: string;
  name: string;
  listType: string;
  personCount: number;
};

interface KlaviyoListItemProps {
  item: KlaviyoListTypes;
  selected: boolean;
  onSelect: React.ChangeEventHandler<HTMLInputElement>;
}

export const KlaviyoListItem = ({
  item,
  selected,
  onSelect,
}: KlaviyoListItemProps) => {
  return (
    <label className="flex alignCenter justifyBetween padding4 rounded4 fz14 hover">
      <div className="spacing2">
        <input
          type="checkbox"
          name="id"
          value={item.id}
          checked={selected}
          onChange={onSelect}
        />
        <span>{item.name}</span>
        <Badge
          className="fz12"
          color={item.listType === 'list' ? 'gray' : 'blue'}
          uppercase
        >
          {item.listType}
        </Badge>
      </div>
      <div className="medium" title="Total profiles">
        {item.personCount}
      </div>
    </label>
  );
};