import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { Image } from '@nutui/nutui-react-taro'
import { ArrowRight } from '@nutui/icons-react-taro'
import './CaseShowcase.scss'

const CaseShowcase: React.FC = () => {
  const cases = [
    {
      id: 1,
      title: '高端住宅',
      image: 'https://oss.wsdns.cn/20260330/case1.jpg',
      description: '180㎡现代简约风格',
      tag: '平开窗'
    },
    {
      id: 2,
      title: '商业办公',
      image: 'https://oss.wsdns.cn/20260330/case2.jpg',
      description: '写字楼幕墙系统',
      tag: '幕墙'
    },
    {
      id: 3,
      title: '别墅定制',
      image: 'https://oss.wsdns.cn/20260330/case3.jpg',
      description: '独栋别墅全景窗',
      tag: '全景窗'
    },
    {
      id: 4,
      title: '旧窗改造',
      image: 'https://oss.wsdns.cn/20260330/case4.jpg',
      description: '老小区窗换新',
      tag: '改造'
    }
  ]

  const handleCaseClick = (caseId: number) => {
    console.log('查看案例:', caseId)
    // TODO: 跳转到案例详情页
  }

  const handleViewAll = () => {
    console.log('查看所有案例')
    // TODO: 跳转到案例列表页
  }

  return (
    <View className="case-showcase px-4">
      <View className="case-showcase__header">
        <View className="case-showcase__title">
          <Text className="text-lg font-semibold text-gray-800">成功案例</Text>
          {/*<Text className="text-sm text-gray-500">真实用户安装效果</Text>*/}
        </View>
        <View className="case-showcase__view-all" onClick={handleViewAll}>
          <Text className="text-xs text-gray-500">全部</Text>
          <ArrowRight size={12} color="#64748b" />
        </View>
      </View>

      <ScrollView
        className="case-showcase__scroll"
        scrollX
        showScrollbar={false}
      >
        {cases.map((item) => (
          <View
            key={item.id}
            className="case-showcase__item"
            onClick={() => handleCaseClick(item.id)}
          >
            <View className="case-showcase__image-container">
              <Image
                src={item.image}
                mode="aspectFill"
                className="case-showcase__image"
              />
              <View className="case-showcase__tag">
                <Text className="text-xs font-medium text-white">{item.tag}</Text>
              </View>
            </View>
            <View className="case-showcase__content flex flex-col">
              <Text className="text-base font-semibold text-gray-800">{item.title}</Text>
              <Text className="text-xs text-gray-500">{item.description}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  )
}

export default CaseShowcase
