import React from 'react';
import { Check, X } from 'lucide-react';

const PartnerPreferences = () => {
  const basicPreferences = [
    { label: "Preferred Bride's Age", value: "22-29 yrs", match: true },
    { label: "Preferred Height", value: "5'0\" - 5'5\"", match: false },
    { label: "Preferred Marital Status", value: "Never Married", match: true },
    { label: "Preferred Mother Tongue", value: "Tamil", match: true },
    { label: "Preferred Physical Status", value: "Normal", match: true },
    { label: "Preferred Eating Habits", value: "Vegetarian", match: false },
    { label: "Preferred Smoking Habits", value: "Doesn't Matter", match: true },
    { label: "Preferred Drinking Habits", value: "Doesn't Matter", match: true },
  ];

  const religiousPreferences = [
    { label: "Preferred Religion", value: "Hindu", match: true },
    { label: "Preferred Caste", value: "Brahmin - Iyer", match: false },
    { label: "Preferred Subcaste", value: "Any", match: false },
    { label: "Preferred Star", value: "Any", match: true },
    { label: "Preferred Dosham", value: "No Dosham", match: true },
  ];

  const PreferenceItem = ({ label, value, match }) => (
    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
      <span className="text-sm text-gray-600 font-medium flex-1">{label}</span>
      <span className="text-sm text-gray-900 font-semibold flex-1 text-left">{value}</span>
      <div className="flex-none w-8 flex justify-end">
        {match ? (
          <div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
            <Check className="w-4 h-4 text-green-600" />
          </div>
        ) : (
          <div className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center">
            <X className="w-4 h-4 text-gray-400" />
          </div>
        )}
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 via-green-50 to-red-50 p-4 sm:p-6 lg:p-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-800 mb-2 flex items-center justify-center gap-2">
            <span className="text-pink-400">✨</span>
            His Partner Preferences
            <span className="text-pink-400">✨</span>
          </h1>
        </div>

        {/* Match Score Card */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <img
                src="https://api.dicebear.com/7.x/avataaars/svg?seed=male1"
                alt="Profile"
                className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl border-4 border-pink-100"
              />
              <div>
                <p className="text-gray-600 text-sm mb-1">You match</p>
                <p className="text-2xl sm:text-3xl font-bold text-pink-600">
                  14<span className="text-gray-400">/20</span>
                </p>
                <p className="text-xs text-gray-500">of his preferences</p>
              </div>
            </div>
            <img
              src="https://api.dicebear.com/7.x/avataaars/svg?seed=female1"
              alt="Your Profile"
              className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl border-4 border-purple-100"
            />
          </div>
        </div>

        {/* Basic Preferences Section */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-bold text-gray-800">Basic Preferences</h2>
            <div className="flex items-center gap-2">
              <span className="text-sm text-gray-600">You match</span>
              <div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
                <Check className="w-4 h-4 text-green-600" />
              </div>
            </div>
          </div>
          <div className="space-y-1">
            {basicPreferences.map((pref, index) => (
              <PreferenceItem key={index} {...pref} />
            ))}
          </div>
        </div>

        {/* Religious Preferences Section */}
        <div className="bg-white rounded-2xl shadow-lg p-6">
          <h2 className="text-lg font-bold text-gray-800 mb-4">Religious Preferences</h2>
          <div className="space-y-1">
            {religiousPreferences.map((pref, index) => (
              <PreferenceItem key={index} {...pref} />
            ))}
          </div>
        </div>

        {/* Footer Note */}
        <div className="text-center mt-6 text-sm text-gray-500">
          <p>Preferences are used to find compatible matches</p>
        </div>
      </div>
    </div>
  );
};

export default PartnerPreferences;