"use client";

import { useState } from "react";
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { EmptyState } from "@/components/ui/EmptyState";

const mockPhotos = Array.from({ length: 8 }, (_, i) => ({
  id: `p${i}`,
  color: ["#FEE2E2", "#FEF3C7", "#D1FAE5", "#DBEAFE", "#EDE9FE", "#FCE7F3", "#E0E7FF", "#FFEDD5"][i],
  emoji: ["🐱", "🐶", "🐱", "🐶", "🐱", "🐱", "🐶", "🐱"][i],
  date: new Date(2026, 5, i + 1).toISOString(),
}));

export default function AlbumPage() {
  const [photos] = useState(mockPhotos);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-gray-800">成长相册</h1>
          <p className="text-sm text-gray-500 mt-1">记录宠物的成长瞬间</p>
        </div>
        <Button variant="primary" size="sm">+ 上传照片</Button>
      </div>

      <div className="grid grid-cols-3 gap-2">
        {photos.map(photo => (
          <div key={photo.id} className="aspect-square rounded-xl flex items-center justify-center text-4xl" style={{ backgroundColor: photo.color }}>
            {photo.emoji}
          </div>
        ))}
      </div>

      <p className="text-center text-xs text-gray-400">下拉加载更多照片</p>
    </div>
  );
}