import React from 'react';

type FavoriteIconProps = {
  variant: 'filled' | 'outlined';
  color?: string;
  width?: number;
  height?: number;
};

const FavoriteIcon = ({
  variant,
  color = '#000000',
  width = 24,
  height = 24,
}: FavoriteIconProps) => (
  <svg
    width={width}
    height={height}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    {variant === 'outlined' ? (
      <path
        d="M19.6485 9.29464L14.8085 8.87464L12.9185 4.42464C12.5785 3.61464 11.4185 3.61464 11.0785 4.42464L9.18849 8.88464L4.35849 9.29464C3.47849 9.36464 3.11849 10.4646 3.78849 11.0446L7.45849 14.2246L6.35849 18.9446C6.15849 19.8046 7.08849 20.4846 7.84849 20.0246L11.9985 17.5246L16.1485 20.0346C16.9085 20.4946 17.8385 19.8146 17.6385 18.9546L16.5385 14.2246L20.2085 11.0446C20.8785 10.4646 20.5285 9.36464 19.6485 9.29464ZM11.9985 15.6546L8.23849 17.9246L9.23849 13.6446L5.91849 10.7646L10.2985 10.3846L11.9985 6.35464L13.7085 10.3946L18.0885 10.7746L14.7685 13.6546L15.7685 17.9346L11.9985 15.6546Z"
        fill={color}
      />
    ) : (
      <path
        d="M12 17.5195L16.15 20.0295C16.91 20.4895 17.8399 19.8095 17.6399 18.9495L16.54 14.2295L20.2099 11.0495C20.8799 10.4695 20.5199 9.36952 19.6399 9.29952L14.81 8.88952L12.92 4.42952C12.58 3.61952 11.42 3.61952 11.08 4.42952L9.18995 8.87952L4.35995 9.28952C3.47995 9.35952 3.11995 10.4595 3.78995 11.0395L7.45995 14.2195L6.35995 18.9395C6.15995 19.7995 7.08995 20.4795 7.84995 20.0195L12 17.5195Z"
        fill={color}
      />
    )}
  </svg>
);

export default FavoriteIcon;