"use client";

import React, { useState } from "react";
import Image from "next/image";

export default function ShopProfile() {
  const [showLicenseImage, setShowLicenseImage] = useState(false);
  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="bg-white p-6 rounded-lg shadow-md">
        {/* 店铺头像和名称 */}
        <div className="flex flex-col items-center">
          <Image
            src="https://s2.loli.net/2025/02/25/G1yo27THWhNC5uf.jpg" // 替换为实际的店铺头像路径
            alt="店铺头像"
            width={100}
            height={100}
            className="rounded-lg border-2 border-yellow-400"
          />
          <div className="mt-4">
            <h1 className="text-2xl font-bold">宠物用品专卖店</h1>
          </div>
        </div>

        {/* 店铺评分 */}
        <div className="mb-4 mt-2">
          <div className="flex flex-row mb-4 items-center justify-center gap-2">
            <h2 className="text-lg font-semibold">店铺评分</h2>
            <div className="flex">
              {[...Array(5)].map((_, index) => (
                <svg
                  key={index}
                  className="w-5 h-5 text-yellow-500"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M10 15l-5.878 3.09 1.121-6.535L0 6.545l6.545-.955L10 0l2.455 5.59L20 6.545l-5.243 4.005 1.121 6.535z" />
                </svg>
              ))}
            </div>
          </div>
          <div className="flex flex-row justify-between space-x-4 mt-2">
            <div className="flex flex-col items-center">
              <span className="text-gray-500">宝贝质量</span>
              <span className="font-bold text-lg">4.9</span>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-gray-500">物流速度</span>
              <span className="font-bold">5.0</span>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-gray-500">服务保障</span>
              <span className="font-bold">4.8</span>
            </div>
          </div>
        </div>

        {/* 保证金金额 */}
        <div className="mb-4">
          <h2 className="text-lg font-semibold">保证金</h2>
          <p className="text-gray-700">¥10,000</p>
        </div>

        {/* 店铺资质 */}
        <div>
          <h2 className="text-lg font-semibold">店铺资质</h2>
          <ul className="list-disc list-inside text-gray-700 mt-2">
            <li
              onClick={() => setShowLicenseImage(!showLicenseImage)}
              className="cursor-pointer text-blue-500"
            >
              营业执照
            </li>
          </ul>
          {showLicenseImage && (
            <div className="mt-4 flex justify-center">
              <Image
                src="https://s2.loli.net/2025/02/25/UIlGv2VKjhL3oDC.jpg"
                alt="营业执照"
                width={500}
                height={500}
                className="rounded-lg border-2 border-gray-300"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}