"use client";

import { FiEdit2, FiEye } from "react-icons/fi";

interface SecurityItem {
  id: string;
  title: string;
}

export default function SecuritySettings() {
  const securityItems: SecurityItem[] = [
    {
      id: "terms",
      title: "Terms and Conditions",
    },
    {
      id: "privacy",
      title: "Privacy Policy",
    },
  ];

  const handleEdit = (id: string) => {
    console.log("Edit:", id);
  };

  const handleView = (id: string) => {
    console.log("View:", id);
  };

  return (
    <div>
      <div className="glass-card-v2 rounded-xl p-4 xl:p-6">
        {/* Header */}
        <div className="mb-5">
          <h2 className="font-body text-lg md:text-xl font-semibold text-table-text">
            Security Settings
          </h2>
        </div>

        {/* Items */}
        <div className="space-y-6 sm:space-y-2.5">
          {securityItems.map((item) => (
            <div
              key={item.id}
              className="
                flex flex-col gap-2
                sm:flex-row sm:items-center sm:justify-between
              "
            >
              <h3 className="text-base md:text-lg font-medium text-table-text">
                {item.title}
              </h3>

              <div className="flex flex-wrap gap-5">
                <button
                  onClick={() => handleEdit(item.id)}
                  className="
                    flex items-center gap-2
                    rounded-xl
                    border border-link-1/20
                    bg-white
                    px-3 py-3
                    text-sm md:text-base leading-5 font-medium
                    text-link
                    transition-all
                    hover:border-link-1
                    hover:bg-link-1
                    hover:text-white
                    cursor-pointer
                  "
                >
                    <span className="flex items-center justify-center h-4.5 w-4.5 md:h-6 md:w-6">
                  <FiEdit2 size={18} />
                  </span>
                  Edit
                </button>

                <button
                  onClick={() => handleView(item.id)}
                  className="
                    flex items-center gap-2
                    rounded-xl
                    border border-link-1/20
                    bg-white
                    px-3 py-3
                    text-sm md:text-base leading-5 font-medium
                    text-link
                    transition-all
                    cursor-pointer
                    hover:border-link-1
                    hover:bg-link-1
                    hover:text-white
                  "
                >
                    <span className="flex items-center justify-center h-4.5 w-4.5 md:h-6 md:w-6">
                  <FiEye size={18} />
                  </span>
                  Show
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}