import React from 'react';

const BirthdayCake: React.FC = () => {
  return (
    <div className='flex h-full items-center justify-center'>
      <svg
        className='h-10 w-10 hover:animate-small-bounce'
        viewBox='0 0 64 64'
        xmlns='http://www.w3.org/2000/svg'
      >
        {/* Cake Base with Stripes */}
        <rect
          x='8'
          y='32'
          width='48'
          height='4'
          className='fill-current'
          style={{ fill: '#df8e79' }}
        />
        <rect
          x='8'
          y='36'
          width='48'
          height='4'
          className='fill-current'
          style={{ fill: '#774f38' }}
        />
        <rect
          x='8'
          y='40'
          width='48'
          height='4'
          className='fill-current'
          style={{ fill: '#df8e79' }}
        />
        <rect
          x='8'
          y='44'
          width='48'
          height='4'
          className='fill-current'
          style={{ fill: '#774f38' }}
        />
        {/* Cake Top */}
        <rect
          x='12'
          y='28'
          width='40'
          height='8'
          className='fill-current'
          style={{ fill: '#df8e79' }}
        />
        {/* Candles */}
        <rect
          x='20'
          y='16'
          width='4'
          height='12'
          className='fill-current'
          style={{ fill: '#ADD8E6' }}
        />
        <rect
          x='30'
          y='16'
          width='4'
          height='12'
          className='fill-current'
          style={{ fill: '#ADD8E6' }}
        />
        <rect
          x='40'
          y='16'
          width='4'
          height='12'
          className='fill-current'
          style={{ fill: '#ADD8E6' }}
        />
        {/* Flames */}
        <circle
          cx='22'
          cy='12'
          r='2'
          className='animate-flicker fill-current'
          style={{ fill: '#FFB343' }}
        />
        <circle
          cx='32'
          cy='12'
          r='2'
          className='animate-flicker fill-current'
          style={{ fill: '#FFB343' }}
        />
        <circle
          cx='42'
          cy='12'
          r='2'
          className='animate-flicker fill-current'
          style={{ fill: '#FFB343' }}
        />
      </svg>
    </div>
  );
};

export default BirthdayCake;