import React from 'react';

interface PostItIconProps {
  className?: string;
  size?: number;
}

const PostItIcon: React.FC<PostItIconProps> = ({ className = '', size = 16 }) => {
  return (
    <svg 
      width={size} 
      height={size} 
      viewBox="0 0 16 16" 
      fill="none" 
      className={className}
    >
      {/* Gradient for sticky note */}
      <defs>
        <linearGradient id="stickyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FEF3C7" />
          <stop offset="100%" stopColor="#FDE047" />
        </linearGradient>
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="1" stdDeviation="0.5" floodColor="#D97706" floodOpacity="0.3"/>
        </filter>
      </defs>
      
      {/* Main sticky note body - square shape */}
      <rect
        x="2"
        y="2"
        width="12"
        height="12"
        rx="1"
        fill="url(#stickyGradient)"
        stroke="#F59E0B"
        strokeWidth="0.5"
        filter="url(#shadow)"
      />
      
      {/* Folded top-right corner */}
      <path
        d="M11.5 2.5L14 2L14 4.5L11.5 2.5Z"
        fill="#F59E0B"
        opacity="0.4"
      />
      
      {/* Text lines to show it's a note */}
      <line x1="4" y1="5" x2="10" y2="5" stroke="#D97706" strokeWidth="0.4" opacity="0.6" />
      <line x1="4" y1="7" x2="11" y2="7" stroke="#D97706" strokeWidth="0.4" opacity="0.6" />
      <line x1="4" y1="9" x2="9" y2="9" stroke="#D97706" strokeWidth="0.4" opacity="0.6" />
      <line x1="4" y1="11" x2="8" y2="11" stroke="#D97706" strokeWidth="0.4" opacity="0.6" />
    </svg>
  );
};

export default PostItIcon;