import { memo } from 'react';
import { dayjs } from '@/utils';

/**
 * PC용 생일 카드 컴포넌트
 */
const BirthdayCard = memo(function BirthdayCard({ schedule, showYear = false, onClick }) {
  const scheduleDate = dayjs(schedule.date);
  const formatted = {
    year: scheduleDate.year(),
    month: scheduleDate.month() + 1,
    day: scheduleDate.date(),
  };

  return (
    <div
      onClick={() => onClick?.(schedule)}
      className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-2xl shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
    >
      {/* 배경 장식 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-4 -right-4 w-24 h-24 bg-white/10 rounded-full" />
        <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-white/10 rounded-full" />
        <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-white/5 rounded-full" />
        <div className="absolute bottom-4 left-12 text-xl animate-pulse">🎉</div>
      </div>

      <div className="relative flex items-center p-4 gap-4">
        {/* 멤버 사진 */}
        {schedule.member_image && (
          <div className="flex-shrink-0">
            <div className="w-20 h-20 rounded-full border-4 border-white/50 shadow-lg overflow-hidden bg-white">
              <img
                src={schedule.member_image}
                alt={schedule.member_names}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        )}

        {/* 내용 */}
        <div className="flex-1 text-white flex items-center gap-3">
          <span className="text-4xl">🎂</span>
          <h3 className="font-bold text-2xl tracking-wide">{schedule.title}</h3>
        </div>

        {/* 날짜 뱃지 */}
        <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
          {showYear && (
            <div className="text-white/70 text-xs font-medium">{formatted.year}</div>
          )}
          <div className="text-white/70 text-xs font-medium">{formatted.month}월</div>
          <div className="text-white text-2xl font-bold">{formatted.day}</div>
        </div>
      </div>
    </div>
  );
});

export default BirthdayCard;
